vue实现页面列表渲染

vue实现页面列表渲染的方法

使用v-for指令

Vue中实现列表渲染最常用的方法是使用v-for指令。v-for可以基于一个数组或对象来渲染一个列表。

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

添加key属性

在列表渲染时，为每个节点提供一个唯一的key属性非常重要。这有助于Vue识别每个节点的身份，提高渲染效率。

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

遍历对象

v-for也可以遍历对象的属性。第一个参数是属性值，第二个参数是属性名，第三个参数是索引。

<ul>
  <li v-for="(value, name, index) in object">
    {{ index }}. {{ name }}: {{ value }}
  </li>
</ul>

使用计算属性过滤列表

当需要对列表进行过滤或排序时，可以使用计算属性。

computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive)
  }
}

在模板中使用计算属性

在模板中可以直接使用计算属性来渲染过滤后的列表。

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

数组更新检测

Vue对数组的变异方法进行了包裹，所以这些方法会触发视图更新：

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

注意事项

由于JavaScript的限制，Vue不能检测以下数组变动：

• 直接设置一个数组项时，如vm.items[index] = newValue
• 直接修改数组长度时，如vm.items.length = newLength

解决方法是使用Vue.set或splice方法：

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