Vue.js 循环中按钮点击变色效果实现

在 Vue.js 中，可以通过一个数据属性来记录当前被点击的按钮的索引，然后通过条件判断来决定按钮是否变色。

首先，在 data 中添加一个名为 activeIndex 的属性，用于记录当前被点击的按钮的索引：

data() {
  return {
    activeIndex: -1, // 初始值为-1，表示没有按钮被点击
  };
},

然后，在循环中的每个按钮上绑定点击事件，并在事件处理函数中更新 activeIndex 的值：

<div v-for='(btn, index) in buttons' :key='index'>
  <button :class='{ 'active': activeIndex === index }' @click='setActive(index)'>{{ btn }}</button>
</div>

接下来，编写 setActive 方法来更新 activeIndex 的值：

methods: {
  setActive(index) {
    this.activeIndex = index;
  },
},

最后，在 CSS 中定义 .active 类来设置按钮的变色样式：

.active {
  background-color: red;
}

这样，当点击某个按钮时，只有该按钮的 class 中含有 active 类，从而变色，其他按钮的 class 中不含有 active 类，不变色。当点击其他按钮时，之前点击变色的按钮的 class 仍然含有 active 类，因此颜色不消失。

完整的代码示例如下：

<template>
  <div>
    <div v-for='(btn, index) in buttons' :key='index'>
      <button :class='{ 'active': activeIndex === index }' @click='setActive(index)'>{{ btn }}</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: ['按钮1', '按钮2', '按钮3'],
      activeIndex: -1,
    };
  },
  methods: {
    setActive(index) {
      this.activeIndex = index;
    },
  },
};
</script>

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