列表渲染
更新时间：
在蓝河应用如果要实现列表渲染，我们会用到 for 指令。 for 指令用于循环输出一个数组类型的数据。
for指令根据源数据数组渲染列表，支持的写法如下（其中{{}}可以省略）：
- `for="{{list}}"`：`list`为源数据数组，默认的数组元素名为`$item`
- `for="{{value in list}}"`：`value`为自定义的数组元素名，默认的数组元素索引名为`$idx`。`list`可以为常数，写法如：`for="{{value in 10}}"`
- `for="{{(index, value) in list}}"`：`index`为自定义的数组元素索引名，`value`为自定义的数组元素名。`list`可以为常数，写法如：`for="{{(index, value) in 10}}"`复制代码
for指令的tid属性用于指定数组元素的唯一 Id，若未指定，默认使用数组索引($idx)作为唯一 Id。tid属性的作用在于元素节点重用，优化 for 循环的重绘效率
示例
<template>
<div class="tutorial-page">
<!-- 方式1：默认$item代表数组中的元素, $idx代表数组中的索引 -->
<div class="tutorial-row" for="{{list}}" tid="uniqueId">
<text>{{$idx}}.{{$item.name}}</text>
</div>
<!-- 方式2：自定义元素变量名称 -->
<div class="tutorial-row" for="value in list" tid="uniqueId">
<text>{{$idx}}.{{value.name}}</text>
</div>
<!-- 方式3：自定义元素、索引的变量名称 -->
<div class="tutorial-row" for="(personIndex, personItem) in list" tid="uniqueId">
<text>{{personIndex}}.{{personItem.name}}</text>
</div>
</div>
</template>
<style lang="less">
.tutorial-page {
flex-direction: column;
.tutorial-row {
width: 85%;
margin-top: 10px;
margin-bottom: 10px;
}
}
</style>
<script>
export default {
data: {
list: [
{ name: 'aa', uniqueId: 1 },
{ name: 'bb', uniqueId: 2 },
{ name: 'cc', uniqueId: 3 },
],
},
onInit() {
console.log('指令for')
},
}
</script>复制代码
示例代码中，在渲染页面时，div.tutorial-row的结构，会根据 script 中的数据 list 的定义，被循环的生成多个。tid="uniqueId"，数组元素的某个属性名，不一定叫 uniqueId。 它类似于 React 的 key={item.uniqueId}或 vue 的 track-by={ uniqueId }, 用于优化渲染速度。当数据修改时，数据不改变的 dom 不会被重新渲染，已经改变的数据所在的 dom 才会被重新渲染， 因此我们必须保证 uniqueId 这个属性值在每个数组元素都不一样。
注意
for 指令只能循环数组，不能循环对象。当 for 指令与 if 指令共存于一个标签时， if 指令的优先级优于 for 指令。为了方便未看文档的新人快速上手项目，不建议这两个指令共存于同一个标签。自定义变量表示 for 指令的数组索引和数组元素时，变量名不可以用
$或_开头；使用tid属性时应注意：
tid属性指定的数据属性必须存在，否则可能导致运行异常tid属性指定的数据属性要保证唯一，否则可能导致性能问题tid属性目前不支持表达式。