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不一定是固定的