Vue 实现v-for循环的时候更改 class的样式名称

当我们在 Vue 中使用 v-for 指令进行循环渲染列表的时候，有时候可能需要根据不同的条件给不同的元素添加不同的样式名称。Vue 中实现这个功能的方法很简单，只需要在 v-bind:class 属性中绑定一个动态的对象即可。

具体的步骤如下：

1. 在 v-for 循环中，使用 v-bind:class 绑定一个动态的对象。

<div v-for="item in itemList" :key="item.id" :class="{ 'active': item.isActive }">{{ item.name }}</div>

在这个例子中，我们循环遍历了一个名为 itemList 的数组，给每个元素绑定了一个动态的 class 名称，当 item.isActive 为 true 时，给当前元素添加一个名为 active 的 class 名称。

1. 使用计算属性或者方法来动态计算添加样式的逻辑。

<div v-for="item in itemList" :key="item.id" :class="getClass(item)">{{ item.name }}</div>

在这个例子中，我们通过定义一个名为 getClass 的方法（也可以使用计算属性），来动态计算当前元素需要添加的 class 名称，该方法接收当前遍历的元素 item 作为参数，根据不同的条件返回不同的 class 名称。

全面的示例代码如下：

<template>
  <div>
    <div v-for="item in itemList" :key="item.id" :class="{ 'active': item.isActive }">{{ item.name }}</div>

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

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: 'Item 1', isActive: true },
        { id: 2, name: 'Item 2', isActive: false },
        { id: 3, name: 'Item 3', isActive: true },
        { id: 4, name: 'Item 4', isActive: false }
      ]
    }
  },

  methods: {
    getClass(item) {
      return {
        'active': item.isActive,
        'text-red': !item.isActive
      }
    }
  }
}
</script>

<style>
.active {
  color: #f00;
}

.text-red {
  color: #f00;
}
</style>

在这个示例中，我们实现了两种给 v-for 循环元素添加 class 的方式：一种是直接在 v-bind:class 中绑定一个动态的对象，另一种是通过计算属性或方法来动态计算需要添加的 class 名称。

其中，我们定义的 getClass 方法中返回了一个对象，该对象中包含了两个属性：active 和 text-red，分别代表给定条件下元素需要添加的样式名称。

需要注意的是，这里通过 CSS 的 text-red 样式来实现给文本添加红色字体色彩的效果，这个样式可以自己按照实际需要自定义，也可以使用其他的样式名称来代替。

总之，在 Vue 中实现给 v-for 循环元素添加样式非常方便，只需要在 v-bind:class 中绑定一个动态对象或者通过计算属性或方法来动态计算需要添加的类名即可。