vue中v-for循环选中点击的元素并对该元素添加样式操作

在Vue.js中，如果你想要通过`v-for`循环遍历数组，并对用户点击的元素添加特定的样式，你可以这样做：

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in items" :key="index" @click="handleClick(item)">
        {{ item }}
        <!-- 使用class绑定动态样式 -->
        <span class="selected" v-if="isSelected(index)">已选择</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'], // 示例数据
    };
  },
  methods: {
    handleClick(item) {
      this.isSelected = (index) => index === this.currentSelectedIndex; // 更新当前选中索引
      // 当前点击元素的索引
      this.currentSelectedIndex = this.items.indexOf(item);
      // 添加或移除选中样式的处理
      item.isClicked = true; // 或者直接设置元素的属性（如果元素有isClicked属性）
    },
    isSelected(index) {
      // 检查当前选中的是否是这个元素，返回布尔值
      return this.currentSelectedIndex === index;
    }
  }
};
</script>

<style scoped>
.selected {
  color: red; /* 样式可以根据需要自定义 */
}
</style>

在这个例子中，当用户点击列表中的任一元素，`handleClick`方法会被触发，更新`currentSelectedIndex`并根据索引来判断当前元素是否应该显示已选择的样式。`v-if`指令会根据`isSelected`函数的结果添加或移除`.selected`类。