div

<div> 组件是用于包装其它组件的最基本容器。支持所有的通用样式、特性、flexbox 布局。其类似于 HTML 的 <div> 容器，但不能 直接在里面添加文本（字符串），如果要展示文本，应该使用 <text> 组件。历史版本中，<div> 别名是 <container>，目前已经弃用 。 注意： <div> 嵌套层级不可过深，否则容易引起性能问题，建议控制在 10 层以内。 一个简单例子： 1. 6. 7. 13. 14.

体验一下

子组件

<div> 基本容器组件，因此支持包括 <div> 在内的任何组件作为自己的子组件。因此，在写一个组件时，推荐外层使用 <div> 作为根容器。

样式

<div> 支持所有通用样式： * 盒模型 * flexbox 布局 * position * opacity * background-color

查看 组件通用样式

事件

<div> 支持所有通用事件： * click * longpress * appear * disappear

查看 通用事件

约束

1. 不能 直接在 <div> 中添加文本。 错误示例，“Hello World!” 无法被正常渲染。 1. 4. 5. 11. 12. 体验一下
2. <div> 在 native 中不可滚动，即使显式设置高度也一样。 错误示例

示例

  1. <template>
    2.   <div>
    3.     <div class="box"></div>
    4.   </div>
    5. </template>
    6.   7. <style scoped>
    8.   .box {
    9.     border-width: 2px;
    10.     border-style: solid;
    11.     border-color: #BBB;
    12.     width: 250px;
    13.     height: 250px;
    14.     margin-top: 250px;
    15.     margin-left: 250px;
    16.     background-color: #EEE;
    17.   }
    18. </style>

try it