首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue列表渲染v-for用法

Vue列表渲染v-for用法完全解析

2026-03-02 09:23:07 作者：Sunny.221

v-for是Vue.js中用于循环渲染元素的指令,非常强大但也需要遵循一些最佳实践,下面这篇文章主要介绍了Vue列表渲染v-for用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

1. v-for 基础语法

遍历数组

v-for指令用于基于源数据多次渲染元素，是Vue.js中最常用的列表渲染方式。

基本用法（不获取索引）

<ul>
    <li v-for="item in names">{{item}}</li>
</ul>

获取索引值

<ul>
    <li v-for="(item, index) in names">{{index+1}}.{{item}}</li>
</ul>

遍历对象

v-for也可以用于遍历对象的属性，支持三种参数格式。

仅获取值

在遍历对象的过程中，如果只是获取一个值，那么获取到的是value

<ul>
    <li v-for="item in info">{{item}}</li>
</ul>

获取键和值

获取key和value 格式：(value, key)

<ul>
    <li v-for="(value, key) in info">{{value}} - {{key}}</li>
</ul>

获取键、值和索引

获取key和value和index 格式：(value, key, index)

<ul>
    <li v-for="(value, key, index) in info">{{value}} - {{key}} - {{index}}</li>
</ul>

2. 关键属性：key的重要性

为什么需要key

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个 :key 属性。key的作用主要是为了更高效的更新虚拟DOM。

性能优化：key帮助Vue识别哪些元素被改变、添加或移除，以优化渲染性能
元素追踪：Vue使用"就地复用"策略，key确保元素被正确跟踪
避免渲染错误：唯一key防止列表更新时出现意外的DOM操作

正确使用key

<!-- 推荐：使用唯一标识符 -->
<ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
</ul>

<!-- 避免使用索引作为key -->
<ul>
    <li v-for="(item, index) in items" :key="index">{{item}}</li>
</ul>

3. 高级用法和技巧

遍历数字范围

<span v-for="n in 5" :key="n">{{ n }}</span>

这将渲染数字1到5。

使用template元素

当需要循环渲染多个元素时，可以使用<template>标签。

<template v-for="item in items">
    <h3>{{ item.title }}</h3>
    <p>{{ item.description }}</p>
</template>

嵌套循环

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

4. 性能优化最佳实践

避免v-for与v-if同时使用

不推荐的做法：

<li v-for="user in users" v-if="user.isActive" :key="user.id">
    {{ user.name }}
</li>

推荐的做法：

<!-- 使用计算属性过滤 -->
<li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
</li>

<script>
computed: {
    activeUsers() {
        return this.users.filter(user => user.isActive);
    }
}
</script>

使用计算属性处理复杂数据

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

<script>
export default {
    computed: {
        filteredItems() {
            return this.items.filter(item => item.price < 50);
        }
    }
}
</script>

5. 响应式数组更新

在Vue.js中，数组的响应式处理是一个非常重要的概念。Vue能够检测到以下数组方法的变化并自动更新视图：

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

Vue响应式数组方法速查表

方法类型	方法名称	是否响应式	功能描述
变异方法	`push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `sort()`, `reverse()`	✅ 是	这些方法会改变原数组，Vue能够检测到变化并更新视图
替换方法	`filter()`, `concat()`, `slice()`	⚠️ 需重新赋值	返回新数组，需要将结果赋值给原数组才能触发更新
索引操作	`array[index] = value`	❌ 否	直接通过索引修改元素，Vue无法检测到变化

响应式数组方法详解

1. 七大变异方法（响应式）

Vue重写了数组的7个原生方法，使其能够触发视图更新：

push() - 在数组末尾添加元素

this.letters.push('F'); // 添加单个元素
this.letters.push('F', 'G', 'H'); // 添加多个元素

pop() - 删除并返回数组的最后一个元素
```
this.letters.pop(); // 删除最后一个元素
```
shift() - 删除并返回数组的第一个元素
```
this.letters.shift(); // 删除第一个元素
```

unshift() - 在数组开头添加元素

this.letters.unshift('Z'); // 在开头添加单个元素
this.letters.unshift('X', 'Y', 'Z'); // 添加多个元素

splice() - 多功能方法（删除/插入/替换）

// 删除：从索引1开始删除1个元素
this.letters.splice(1, 1);

// 替换：从索引1开始替换3个元素
this.letters.splice(1, 3, 'M', 'N', 'O');

// 插入：从索引1开始插入元素（不删除）
this.letters.splice(1, 0, 'X', 'Y', 'Z');

sort() - 对数组元素进行排序

this.letters.sort(); // 默认按字母顺序排序

reverse() - 反转数组元素的顺序

this.letters.reverse(); // 将数组反转

2. 非响应式操作及解决方案

直接通过索引修改元素不会触发更新：

// 以下操作不会触发视图更新！
this.letters[0] = 'BBB'; // ❌ 非响应式

解决方案：

使用splice()方法：

this.letters.splice(0, 1, 'BBB'); // ✅ 响应式

使用Vue.set()或this.$set()：

Vue.set(this.letters, 0, 'BBB'); // ✅ 响应式
// 或
this.$set(this.letters, 0, 'BBB'); // ✅ 响应式

实际应用示例

这里是一些实用的操作示例：

methods: {
    btnClick() {
        // 清空数组的几种方式
        this.letters = []; // 方法1：重新赋值（响应式）
        this.letters.splice(0); // 方法2：删除所有元素（响应式）
        
        // 删除部分元素
        const startIndex = 2;
        this.letters.splice(startIndex, this.letters.length - startIndex);
        
        // 批量替换元素
        this.letters.splice(1, 3, 'X', 'Y', 'Z'); // 从索引1开始替换3个元素
    }
}

掌握Vue中数组的响应式操作方法对于开发Vue应用至关重要。记住关键点：优先使用7大变异方法，避免直接通过索引修改元素，必要时使用Vue.set()或this.$set()。

希望这份学习笔记能帮助你更好地理解和应用Vue中的数组响应式特性！

6. 实际应用场景

动态列表渲染

<div id="app">
    <input v-model="newItem" @keyup.enter="addItem">
    <ul>
        <li v-for="(item, index) in items" :key="item.id">
            {{ item.text }}
            <button @click="removeItem(index)">删除</button>
        </li>
    </ul>
</div>

表格数据展示

<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(person, index) in persons" :key="person.id">
            <td>{{ index + 1 }}</td>
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
        </tr>
    </tbody>
</table>

7. 注意事项

key的唯一性：确保每个列表项的key都是唯一的
数组更新检测：对于非变更方法（如filter、concat），需要重新赋值数组
对象属性顺序：遍历对象时，属性顺序不一定是定义时的顺序
性能考虑：大型列表考虑使用虚拟滚动技术优化性能

通过合理运用v-for指令及其相关优化技巧，可以构建出高效、动态的用户界面，提升应用性能和用户体验。

到此这篇关于Vue列表渲染v-for用法完全解析的文章就介绍到这了,更多相关Vue列表渲染v-for用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！