如何在Vue的v-for循环中只为单个元素添加类？

你现在的问题出在用单个全局布尔值dotIsVisible控制所有Dot的状态，所以一点击所有Dot都会跟着切换。要实现单个Dot独立控制，得给每个Dot单独记录激活状态，具体改法如下：

1. 修改Data中的状态存储 #

把原来的dotIsVisible换成一个对象，用来存每个激活的Dot的唯一标识：

data() {
  return {
    frets: 10,
    stringsNumber: 6,
    fretNumberIsVisible: true,
    activeDots: {}, // 键格式为`${fret}-${string}`，值为布尔值
  };
}

2. 更新点击事件方法 #

点击时切换对应Dot的激活状态，用fret和string拼接成唯一键来定位：

showDot(fret, string) {
  const dotKey = `${fret}-${string}`;
  this.activeDots[dotKey] = !this.activeDots[dotKey];
}

3. 模板中绑定动态Class #

给Dot元素添加动态class，根据activeDots里的状态判断是否显示激活样式：

<span
  class="string"
  v-for="(string, index) in stringsNumber"
  :key="index"
  :string="string"
  @click="showDot(fret, string)"
>
  <div class="dot" :class="{ active: activeDots[`${fret}-${string}`] }"></div>
</span>

4. 补充CSS激活样式 #

给激活状态的Dot加上背景色（替换成你需要的颜色）：

.dot {
  background-color: transparent;
  /* 保留你原来的其他样式，比如宽高、边框等 */
}
.dot.active {
  background-color: #ff4444; /* 示例红色，按需修改 */
}

这样每个Dot的状态都是独立存储的，点击哪个就只会切换哪个的背景色，不会影响其他Dot。

内容的提问来源于stack exchange，提问作者Eryk Lange