vue js循环数组的几种方式

Vue.js 提供了很多方便的指令来循环数组，以下是几种常见的方式：

1. 使用`v-for`指令

`v-for`指令是Vue.js中最常用的指令之一，它可以用来循环数组、对象或数字。对于数组的循环，可以这样写：

<div v-for="(item, index) in items" :key="index">{{ item }}</div>

其中，`items`是要循环的数组，`item`是当前循环的元素，`index`是当前循环的索引。注意要为每个循环的元素设置一个唯一的`key`属性。

2. 使用`v-bind`指令

`v-bind`指令可以用来绑定DOM元素的属性，例如`class`、`style`等。对于数组的循环，可以这样写：

<div v-bind:class="{ active: item.isActive }" v-for="(item, index) in items" :key="index">{{ item }}</div>

其中，`item.isActive`是一个布尔值，如果为`true`，则给当前循环的元素添加一个`active`类。

3. 使用`v-model`指令

`v-model`指令可以用来实现双向数据绑定，对于数组的循环，可以这样写：

<div v-for="(item, index) in items" :key="index">
  <input type="text" v-model="items[index]">
</div>

其中，`v-model`指令将输入框的值与数组中对应索引的元素进行双向绑定。

4. 使用`computed`属性

如果需要对数组进行一些计算，例如过滤、排序等，可以使用`computed`属性来处理。例如：

computed: {
  filteredItems: function() {
    return this.items.filter(function(item) {
      return item.isActive;
    });
  }
}

其中，`filteredItems`是一个计算属性，它返回一个过滤后的数组。

以上是几种常见的循环数组的方式，根据不同的需求选择合适的方式可以使代码更加简洁、易读。