v-for

列表渲染

---

• 遍历一个数组

<div v-for="item in itemList">{{ item.name }}</div>

<div v-for="(item, index) in itemList">{{ item.index }}</div>

---

• 遍历一个对象

<div v-for="(value, key, index) in obj">{{ value }}</div>

---

通过 key 管理状态

• 当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染，所以每一项要添加一个唯一的key（diff算法）

<div v-for="item in itemList" :key="item.name">{{ item.name }}</div>

• 不要用index作为key，因为这个要被遍历的数组，每一项index不一定是固定的