vue列表怎么实现
实现 Vue 列表的基础方法
使用 v-for 指令可以动态渲染列表。将 v-for 绑定到数组上，遍历数组中的每个元素并生成对应的 DOM 节点。
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
}
}
</script>使用 :key 提高性能
在 v-for 中必须为每个节点绑定唯一的 key，Vue 依赖 key 进行高效的 DOM 更新。通常使用唯一标识符（如 id）而非数组索引。
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>遍历对象
v-for 也可以遍历对象的属性，语法为 (value, key, index)。
<template>
<ul>
<li v-for="(value, key) in user" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
user: {
name: 'John',
age: 30,
email: 'john@example.com'
}
}
}
}
</script>结合计算属性动态过滤列表
通过计算属性可以动态过滤或排序列表数据，避免直接修改原始数据。
<template>
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Apple', category: 'fruit' },
{ id: 2, name: 'Carrot', category: 'vegetable' },
{ id: 3, name: 'Banana', category: 'fruit' }
],
filterCategory: 'fruit'
}
},
computed: {
filteredItems() {
return this.items.filter(item => item.category === this.filterCategory)
}
}
}
</script>使用 v-for 结合 v-if 的条件渲染
Vue 3 允许 v-for 和 v-if 同时作用在同一个元素上，但建议优先使用计算属性过滤数据以提高性能。
<template>
<ul>
<li v-for="item in items" v-if="item.isActive" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>列表动态更新
Vue 会响应数据变化自动更新 DOM。直接修改数组（如 push、splice）或替换整个数组均可触发视图更新。
methods: {
addItem() {
this.items.push({ id: 4, name: 'New Item' })
},
removeItem(index) {
this.items.splice(index, 1)
}
}使用 <template> 渲染多元素块
如果需要渲染多个元素但不希望包裹额外 DOM，可以使用 <template> 标签。
<template v-for="item in items" :key="item.id">
<p>{{ item.name }}</p>
<hr />
</template>
