二、uni-app模板块常用写法以及注意事项

for循环

// 数据源
dataList: [{sid: "xxx_1", name: 'X'}, {sid: "xxx_2", name: 'Y'}, {sid: "xxx_3", name: 'Z'}]
dataList2: [{sid: "xxx_0", name: '新增数据'},{sid: "xxx_1", name: 'X'}, {sid: "xxx_2", name: 'Y'}, {sid: "xxx_3", name: 'Z'}]

v-for 指令需要使用item in items 形式的特殊语法，其中items 是源数据数组，而 item 则是被迭代的数组元素的别名。
第一个参数item 则是被迭代的数组元素的别名。
第二个参数，即当前项的索引 index，是可选的。

<view v-for="(item, index) in dataList" >
    <view>{{item.name}}</view >
</view>

结果

X
Y
X

当 Vue 正在更新使用v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

<view v-for="(item,index) in dataList" >
    <view>{{item.name}}</view>
    <switch></switch>
</view>

显示效果

X
关闭
Y
关闭
Z
关闭

此时把Y的switch进行打开，显示效果

X
关闭
Y
打开
Z
关闭

随后更改数据源为datList2，显示效果为

新增数据
关闭
X
打开
Y
关闭
Z
关闭

此时发现本来是Y打开，顶部新增一个元素后变成是X打开，这就是所谓的就地更新每个元素，每个索引位置进行正确渲染，而switch是没有被重新渲染的（因为数据源没有控制switch开关状态的保存），所以显示的位置就不对了。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。

<view v-for="(item, index) in dataList"  :key="item.sid">
    <view>{{item.name}}</view >
    <switch></switch>
</view>

重复如上操作，显示为正确

新增数据
关闭
X
关闭
Y
打开
Z
关闭

如不提供 :key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

#注意#当同一个页面同时存在两个或两个以上的 v-for 遍历的时候，key值不能重复否则H5报错

<view v-for="(item,index) in dataList" key="index">
    <view>{{item.name}}</view>
</view>

<view v-for="(item, index) in dataList2"  :key="item.sid">
    <view>{{item.name}}</view >
    <switch></switch>
</view>

最后编辑于：2021.09.23 11:38:39