vue如何实现列表渲染

使用 v-for 指令进行列表渲染

Vue 通过 v-for 指令实现列表渲染。v-for 可以遍历数组或对象，并为每个元素生成对应的 DOM 节点。

语法示例：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

遍历数组

v-for 支持遍历数组，并提供可选的索引参数：

<div v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.text }}
</div>

遍历对象

v-for 也可以遍历对象的属性：

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

使用 key 属性

为每个渲染的元素添加唯一的 key 属性是必要的，它帮助 Vue 高效地更新 DOM：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

渲染范围值

v-for 可以渲染一个范围内的整数：

<span v-for="n in 10" :key="n">{{ n }}</span>

在组件上使用 v-for

在自定义组件上使用 v-for 时，需要显式传递数据：

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

数组更新检测

Vue 能检测以下数组方法触发的变更：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

注意事项

直接通过索引设置数组项或修改数组长度不会触发视图更新。应使用 Vue.set 或数组的变异方法：

Vue.set(vm.items, indexOfItem, newValue)
// 或
vm.items.splice(indexOfItem, 1, newValue)