v-for
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <template>
<ul>
<li v-for="user in userList" :key="user.id">id:{{ user.id }} name:{{ user.name }}</li>
</ul>
</template><script>
export default {
name: "list",
data() {
return {
userList: [
{ id: "1", name: "张三" },
{ id: "2", name: "李四" },
],
};
},
};
</script>
|
维护状态
当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引的位置正确渲染。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的keyattribute
1
2
3
|
<li v-for="user in userList" :key="user.id">id:{{ user.id }} name:{{ user.name }}</li>
|
