Vue


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

页面列表

ITEM_HTML