宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

一、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警告的出现。