<template> <div> <h3>商品列表</h3> <ul> <!-- 基本用法：item 是当前项，index 是索引 --> <li v-for="(product, index) in products" :key="product.id"> {{ index + 1 }}. {{ product.name }} - ￥{{ product.price }} </li> </ul> </div> </template> <script setup> import { ref } from 'vue'; const products = ref([ { id: 1, name: '笔记本电脑', price: 5999 }, { id: 2, name: '智能手机', price: 3999 }, { id: 3, name: '无线耳机', price: 899 }, ]); </script>

2. 遍历对象

<template> <div> <h3>用户信息</h3> <ul> <!-- value: 属性值, key: 属性名, index: 索引 --> <li v-for="(value, key, index) in userInfo" :key="key"> {{ index + 1 }}. {{ key }}: {{ value }} </li> </ul> </div> </template> <script setup> import { ref } from 'vue'; const userInfo = ref({ name: '张三', age: 25, email: 'zhangsan@example.com', city: '北京' }); </script>

二、关键属性`:key`

始终为v-for的元素提供:key属性，这是 Vue 识别节点身份、高效更新 DOM 的关键。

<template> <div> <!-- 使用唯一标识作为 key（推荐） --> <div v-for="item in items" :key="item.id">{{ item.name }}</div> <!-- 使用索引作为 key（不推荐，除非列表是静态的） --> <div v-for="(item, index) in items" :key="index">{{ item.name }}</div> </div> </template> <script setup> import { ref } from 'vue'; const items = ref([ { id: 101, name: '项目A' }, { id: 102, name: '项目B' }, { id: 103, name: '项目C' }, ]); </script>

三、在`<template>`上使用`v-for`

可以在<template>标签上使用v-for来渲染多个元素，而不添加额外的 DOM 元素。

<template> <div> <!-- 渲染多个元素而不包裹额外div --> <template v-for="item in items" :key="item.id"> <h4>{{ item.title }}</h4> <p>{{ item.content }}</p> <hr /> </template> </div> </template>

四、循环嵌套

<template> <div> <div v-for="category in categories" :key="category.id"> <h3>{{ category.name }}</h3> <ul> <li v-for="product in category.products" :key="product.id"> {{ product.name }} </li> </ul> </div> </div> </template> <script setup> import { ref } from 'vue'; const categories = ref([ { id: 1, name: '电子产品', products: [ { id: 101, name: '手机' }, { id: 102, name: '电脑' } ] }, { id: 2, name: '书籍', products: [ { id: 201, name: 'Vue.js指南' }, { id: 202, name: 'JavaScript高级编程' } ] } ]); </script>

五、遍历数字范围

v-for也可以接受一个整数，用于重复渲染指定次数。

<template> <div> <!-- 渲染 5 次 --> <span v-for="n in 5" :key="n">{{ n }} </span> <!-- 输出: 1 2 3 4 5 --> </div> </template>

六、`v-for`与`v-if`的结合使用

不推荐在同一元素上同时使用v-for和v-if。正确的做法是：

<template> <div> <!-- 错误：不要在同一元素上同时使用 --> <!-- <li v-for="user in users" v-if="user.isActive" :key="user.id">{{ user.name }}</li> --> <!-- 正确方法1：使用计算属性过滤 --> <ul> <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li> </ul> <!-- 正确方法2：在外层使用 <template> 包裹 --> <template v-for="user in users" :key="user.id"> <li v-if="user.isActive">{{ user.name }}</li> </template> </div> </template> <script setup> import { computed, ref } from 'vue'; const users = ref([ { id: 1, name: 'Alice', isActive: true }, { id: 2, name: 'Bob', isActive: false }, { id: 3, name: 'Charlie', isActive: true }, ]); // 通过计算属性过滤 const activeUsers = computed(() => users.value.filter(user => user.isActive)); </script>

七、动态操作数组

Vue 能检测到以下数组方法的变化，并触发视图更新：

<template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> <button @click="addItem">添加项目</button> <button @click="removeFirst">删除第一个</button> <button @click="reverseItems">反转列表</button> </div> </template> <script setup> import { ref } from 'vue'; const items = ref([ { id: 1, name: '项目A' }, { id: 2, name: '项目B' }, { id: 3, name: '项目C' }, ]); const addItem = () => { const newId = items.value.length + 1; // push - 添加到最后 items.value.push({ id: newId, name: `项目${newId}` }); }; const removeFirst = () => { // shift - 移除第一个 items.value.shift(); }; const reverseItems = () => { // reverse - 反转数组 items.value.reverse(); }; </script>

八、性能优化技巧

始终使用:key，且避免使用索引作为 key（除非列表是静态的）
避免在v-for中使用复杂表达式，可以使用计算属性
大型列表使用虚拟滚动（如vue-virtual-scroller）
使用v-for和v-if时注意优先级（v-for优先级更高）

九、实用示例：待办事项列表

<template> <div> <h3>待办事项 ({{ remainingCount }}/{{ todos.length }})</h3> <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务..." /> <ul> <li v-for="todo in filteredTodos" :key="todo.id"> <input type="checkbox" v-model="todo.completed" /> <span :class="{ completed: todo.completed }">{{ todo.text }}</span> <button @click="removeTodo(todo.id)">删除</button> </li> </ul> <div> <button @click="filter = 'all'">全部</button> <button @click="filter = 'active'">未完成</button> <button @click="filter = 'completed'">已完成</button> </div> </div> </template> <script setup> import { computed, ref } from 'vue'; let nextId = 3; const newTodo = ref(''); const filter = ref('all'); // 'all', 'active', 'completed' const todos = ref([ { id: 1, text: '学习Vue.js', completed: true }, { id: 2, text: '练习循环渲染', completed: false }, ]); const addTodo = () => { if (newTodo.value.trim()) { todos.value.push({ id: nextId++, text: newTodo.value, completed: false }); newTodo.value = ''; } }; const removeTodo = (id) => { const index = todos.value.findIndex(todo => todo.id === id); if (index !== -1) { todos.value.splice(index, 1); } }; // 计算属性：过滤待办事项 const filteredTodos = computed(() => { switch (filter.value) { case 'active': return todos.value.filter(todo => !todo.completed); case 'completed': return todos.value.filter(todo => todo.completed); default: return todos.value; } }); // 计算属性：剩余数量 const remainingCount = computed(() => { return todos.value.filter(todo => !todo.completed).length; }); </script> <style> .completed { text-decoration: line-through; color: #888; } </style>