vue如何实现列表渲染
Vue 列表渲染的实现方法
Vue 提供了 v-for 指令来实现列表渲染，支持遍历数组、对象或数字范围。
遍历数组
使用 v-for 遍历数组时，可以获取当前项和索引：
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.name }}
</li>
</ul>遍历对象
遍历对象时可以获取属性值、键名和索引：
<ul>
<li v-for="(value, key, index) in object" :key="key">
{{ index }}. {{ key }}: {{ value }}
</li>
</ul>遍历数字范围
v-for 也可以直接遍历数字范围：
<span v-for="n in 10">{{ n }}</span>使用 key 属性
为每个渲染项添加唯一的 key 可以提高渲染效率并避免状态混乱：
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>在组件上使用 v-for
在自定义组件上使用 v-for 时，需要显式传递数据：
<my-component
v-for="(item, index) in items"
:key="item.id"
:item="item"
:index="index">
</my-component>数组更新检测
Vue 能检测以下数组方法触发的变更：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
对于非变更方法（如 filter()、concat()、slice()），可以用新数组替换旧数组：
this.items = this.items.filter(item => item.isActive)显示过滤/排序结果
不改变原始数据的情况下，可以使用计算属性：
computed: {
filteredItems() {
return this.items.filter(item => item.isActive)
}
}
