v-for 循环中computed属性动态绑定

在v-for循环中，如果需要动态绑定class，可以通过computed属性来实现。具体实现方法如下：

1. 首先，在data中定义需要绑定的class名称，以及一个包含class名称的数组。

2. 在computed属性中，使用map方法遍历数据源，根据需要绑定的条件返回class名称，然后将class名称添加到数组中。

3. 在v-for循环中，使用v-bind指令将class绑定到computed属性中定义的数组上。

举个例子，假设你有一个数组items，你想要在循环中动态绑定class，可以按照以下方法实现：

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

<script>
export default {
  data() {
    return {
      activeClass: 'active',
      items: [
        { name: 'item1', active: true },
        { name: 'item2', active: false },
        { name: 'item3', active: true },
        { name: 'item4', active: false }
      ],
      classes: []
    }
  },
  computed: {
    getClass() {
      return this.items.map((item, index) => {
        if (item.active) {
          return this.activeClass
        } else {
          return ''
        }
      })
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>

在上面的代码中，我们在data中定义了需要绑定的class名称activeClass，以及一个包含class名称的数组classes。在computed属性中，我们使用map方法遍历数据源items，根据需要绑定的条件返回class名称，然后将class名称添加到classes数组中。

在v-for循环中，我们使用v-bind指令将class绑定到computed属性中定义的数组classes上。这样，当item.active为true时，对应的div元素就会应用active这个class，字体颜色变为红色。