For

用于循环生成一个或多个子组件的组件。

<For list="newsList" item="item" index="i">
    <Text link:open="{{item.link}}">{{item.title}}</Text>
    <Text>{{item.summary}}</Text>
    <Divider v:hide="{{item.hideDivider}}"></Divider>
</For>
{
    "newsList": [
        {"title": "title 1", "link": "http://example.com/news/1", "summary": "summary 1"},
        {"title": "title 2", "link": "http://example.com/news/2", "summary": "summary 2"},
        {"title": "title 3", "link": "http://example.com/news/3", "summary": "summary 3", "hideDivider": true}
    ],
    "title": "top level"
}

需要特别注意的是,For 组件的 list 属性本身已经是变量名称,因此不再进一步支持变量,而 item 属性是相当于声明了一个局部变量,也不再进一步支持变量。 在 <For></For> 组件里面使用 item 声明的局部变量时,需要使用 . 号访问,比如 {{item.title}},如果使用 {{title}} 将访问到上一级的变量 title

和其它组件一样,For 组件可以嵌套使用,每一层的变量作用域仅限于各层自己的范围,如果有相同命名的变量(item),则里层的覆盖外层的,以此类推。

请务必保证 list 指向的数据是一个数组,否则 For 组件将不会渲染出来。

属性名称说明是否支持变量默认值
标签内容子组件
list变量的值必须是数组。
item声明一个局部变量,值为当前遍历的元素,只能在 For 组件内部使用。
index声明一个局部变量,值为当前遍历的元素的索引,只能在 For 组件内部用。