Vue.js 循环语句详解
v-for指令完全指南 – 编程小白也能懂
本指南将用简单易懂的语言解释Vue中循环语句(v-for)的各种用法和技巧
1. 最基本的循环
数组循环
在Vue中，使用v-for指令可以循环渲染一组数据：
<ul>
<li v-for=”item in items” :key=”item.id”>
{{ item.name }}
</li>
</ul>
<li v-for=”item in items” :key=”item.id”>
{{ item.name }}
</li>
</ul>
注意：必须为每项提供唯一的
:key属性，这样Vue才能跟踪每个节点的身份
循环索引
如果需要索引值，可以添加第二个参数：
<div v-for=”(item, index) in items” :key=”item.id”>
{{ index }} – {{ item.name }}
</div>
{{ index }} – {{ item.name }}
</div>
2. 循环对象属性
循环对象
v-for也可以用来循环对象的属性：
<ul>
<li v-for=”(value, key) in user” :key=”key”>
{{ key }}: {{ value }}
</li>
</ul>
<li v-for=”(value, key) in user” :key=”key”>
{{ key }}: {{ value }}
</li>
</ul>
带索引的对象循环
如果需要索引值，可以添加第三个参数：
<div v-for=”(value, key, index) in user” :key=”key”>
{{ index }}. {{ key }}: {{ value }}
</div>
{{ index }}. {{ key }}: {{ value }}
</div>
提示：在遍历对象时，会按 Object.keys() 的结果遍历
3. 其他循环用法
循环数字范围
可以使用v-for循环一个数字范围：
<span v-for=”n in 10″ :key=”n”>{{ n }} </span>
循环字符串
也可以循环字符串中的每个字符：
<span v-for=”char in ‘Hello'” :key=”char”>
{{ char }}
</span>
{{ char }}
</span>
使用v-for和v-if
在同一元素上使用v-for和v-if时，v-for优先级更高：
<div v-for=”item in items” v-if=”item.isActive” :key=”item.id”>
{{ item.name }}
</div>
{{ item.name }}
</div>
最佳实践：将v-if放在容器元素上，避免同时使用
4. 重要注意事项
为什么需要:key属性
:key帮助Vue识别节点，高效更新DOM。没有key时，Vue会使用”就地复用”策略，可能导致状态错误。
数组更新检测
Vue包装了数组的变更方法，以下方法可以触发视图更新：
- push() – 添加元素到末尾
- pop() – 删除最后一个元素
- shift() – 删除第一个元素
- unshift() – 添加元素到开头
- splice() – 添加/删除元素
- sort() – 排序
- reverse() – 反转
注意：直接通过索引修改数组项或修改数组长度不会触发更新，应使用
Vue.set或splice
替代v-if的方案
当需要条件过滤列表时，推荐使用计算属性：
computed: {
activeItems() {
return this.items.filter(item => item.isActive);
}
}
<div v-for=”item in activeItems” :key=”item.id”>
{{ item.name }}
</div>
activeItems() {
return this.items.filter(item => item.isActive);
}
}
<div v-for=”item in activeItems” :key=”item.id”>
{{ item.name }}
</div>
v-for 实战演示
{{ product.name }}
¥{{ product.price.toFixed(2) }}
库存: {{ product.stock }}件
索引: {{ index }}
此演示展示了：
- v-for渲染商品列表
- :key使用商品ID确保正确更新
- 数组方法修改数据（push, pop, splice）
- 计算属性实现过滤功能
- Vue响应式数据更新