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)
