vue怎么给循环的元素 通过点击 只给点击的元素添加类名

可以使用 Vue.js 的 v-bind 指令和计算属性来动态添加类名。具体步骤如下：

1. 在循环的元素上使用 v-bind 绑定一个 class 属性，该属性的值为一个对象；
2. 对象的键为类名，值为一个布尔值，通过计算属性来动态设置；
3. 当点击某个元素时，通过事件绑定调用一个方法来设置该元素的选中状态，同时更新计算属性的值。

具体代码如下：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index" :class="{ selected: index === selectedIndex }" @click="toggleSelected(index)">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3'],
      selectedIndex: -1
    }
  },
  methods: {
    toggleSelected(index) {
      this.selectedIndex = index
    }
  },
  computed: {
    isSelected() {
      return (index) => this.selectedIndex === index
    }
  }
}
</script>

<style>
.selected {
  background-color: #ccc;
}
</style>

上面的代码中，循环的每个 li 元素上使用 v-bind:class 绑定一个 class 属性，属性值为一个对象，该对象的键为 "selected"，值为一个计算属性 isSelected 的返回值。当点击某个元素时，会调用 toggleSelected 方法来设置该元素的选中状态，并更新 selectedIndex 变量。isSelected 计算属性会根据 selectedIndex 变量的值来动态计算每个元素是否被选中，从而动态添加或删除 "selected" 类名。最终效果为，当点击某个元素时，只有该元素背景色会变成灰色，表示被选中。