一、vue循环遍历数组
vue中最常用的是通过v-for指令实现对数组的循环遍历。
<div v-for="(item, index) in array">
{{ index }}: {{ item }}
</div>
上述代码中的item代表数组中的单个元素，index代表数组中对应的下标。
在vue中还可以使用v-for指令的简写形式，如下所示：
<div v-for="item in array">
{{ item }}
</div>
可以看出，在上述简写形式中只能访问到数组中的单个元素，无法访问到对应的下标。
除了循环遍历数组之外，v-for指令还可以用于循环遍历对象，接下来我们将对vue循环遍历对象进行详细介绍。
二、vue循环遍历对象
在vue中，如果想要循环遍历对象，需要使用v-for指令的特殊语法。具体语法如下所示：
<div v-for="(value, key, index) in object">
{{ index }}: {{ key }} - {{ value }}
</div>
上述代码中的value代表对象中的单个属性值，key代表对象中对应的属性名，index代表对象中对应的下标。需要注意的是，在循环遍历对象的时候，v-for指令必须显式的声明三个变量，否则vue会报错。
三、vue循环遍历数组对象实战
接下来我们通过一个实例来加深对vue循环遍历数组对象的理解。
首先，我们定义一个包含多个商品信息的数组，每个商品信息包含id、name、price和inventory四个属性。如下所示：
data() {
return {
products: [
{ id: 1, name: '商品1', price: 100, inventory: 5 },
{ id: 2, name: '商品2', price: 200, inventory: 3 },
{ id: 3, name: '商品3', price: 300, inventory: 8 },
{ id: 4, name: '商品4', price: 400, inventory: 2 },
{ id: 5, name: '商品5', price: 500, inventory: 0 }
]
}
}
接下来，我们将商品信息展示到页面上：
<div v-for="product in products" :key="product.id">
<div>商品名称: {{ product.name }}</div>
<div>商品价格: {{ product.price }}</div>
<div>库存: {{ product.inventory }}</div>
<hr>
</div>
上述代码中使用v-for指令对数组进行遍历，使用:key绑定每个商品信息的唯一标识id，避免vue在渲染时出现警告。同时，使用v-if指令控制商品是否有库存，当inventory等于0时，不显示该商品。
四、总结
通过上述实例，我们可以看出，在vue中对数组和对象进行循环遍历非常方便，可以使用v-for指令来实现。在使用时，需要注意循环遍历对象时必须显示的声明三个变量，而循环遍历数组则只需一个变量即可。同时，在实践中需要考虑到数据的唯一性，如果数据项不唯一需要通过绑定key值的方式来避免vue警告的出现。
原创文章，作者：IOYCS，如若转载，请注明出处：https://www.506064.com/n/362078.html
微信扫一扫 
支付宝扫一扫 