vue学习笔记四-列表渲染

v-for

<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

<li v-for="user in userList" :key="user.id">id:{{ user.id }}  name:{{ user.name }}</li>