vue实现页面列表渲染
基本列表渲染
在Vue中，可以使用v-for指令实现列表渲染。基本语法是通过v-for遍历数组或对象，动态生成DOM元素。
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
]
}
}
}
</script>带索引的渲染
v-for支持第二个参数作为当前项的索引，可以用于显示序号或作为唯一标识。
<template>
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index + 1 }}. {{ item.name }}
</li>
</ul>
</template>对象遍历
v-for也可以遍历对象的属性，参数顺序为(value, key, index)。
<template>
<ul>
<li v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
object: {
title: 'Vue Guide',
author: 'Vue Team',
published: '2021'
}
}
}
}
</script>维护状态
为每个渲染项添加唯一的key属性，帮助Vue识别节点，提高渲染效率。
<template>
<div v-for="item in items" :key="item.id">
<input :value="item.text">
</div>
</template>数组更新检测
Vue对数组的变异方法进行了包裹，以下操作会触发视图更新：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
methods: {
addItem() {
this.items.push({ id: 4, name: 'New Item' })
}
}显示过滤/排序结果
使用计算属性显示处理后的列表，避免直接修改原始数据。
computed: {
filteredItems() {
return this.items.filter(item => item.active)
}
}在组件上使用v-for
在自定义组件上使用v-for时，需要显式传递数据。
<template>
<my-component
v-for="(item, index) in items"
:item="item"
:index="index"
:key="item.id"
></my-component>
</template>
