Vue.js技术问询：点击CLICK-ME如何仅改变对应CHANGE-COLOR背景色

嘿，这个需求在Vue里其实很容易实现，而且完全不用像jQuery那样直接操作DOM——毕竟Vue是数据驱动的嘛！我给你两种常见的实现方式，你可以根据自己的场景选择：

方式一：给每个todo项添加状态属性 #

这种方式适合你可以修改todos数组结构的情况，直接把高亮状态存在每个todo里，逻辑最直观：

首先在组件的data中，给每个todo项新增一个状态属性（比如isHighlighted），初始值设为false：

data() {
  return {
    todos: [
      { name: '买牛奶', isHighlighted: false },
      { name: '写代码', isHighlighted: false },
      // 其他todo项...
    ]
  }
}

然后修改模板，给点击元素绑定切换状态的事件，同时给目标li绑定动态class：

<div v-for="(todo, n) in todos" :key="n">
  <i class="CLICK-ME" @click="todo.isHighlighted = !todo.isHighlighted"></i>
  <li class="CHANGE-COLOR" :class="{ red: todo.isHighlighted }"> 
    {{ todo.name }} 
  </li>
</div>

最后别忘了在样式里定义red类：

.red {
  background-color: red;
}

方式二：单独维护状态数组（不修改原todos） #

如果你不想改动原有的todos数据结构，可以单独用一个数组来记录哪些项需要高亮：

首先在data里新增一个数组用来存高亮项的索引：

data() {
  return {
    todos: [/* 你的原有todo数据 */],
    highlightedIndexes: []
  }
}

然后添加一个方法来切换指定索引项的高亮状态：

methods: {
  toggleHighlight(index) {
    if (this.highlightedIndexes.includes(index)) {
      // 若已高亮，移除索引
      this.highlightedIndexes = this.highlightedIndexes.filter(i => i !== index)
    } else {
      // 若未高亮，添加索引
      this.highlightedIndexes.push(index)
    }
  }
}

模板部分改成这样：

<div v-for="(todo, n) in todos" :key="n">
  <i class="CLICK-ME" @click="toggleHighlight(n)"></i>
  <li class="CHANGE-COLOR" :class="{ red: highlightedIndexes.includes(n) }"> 
    {{ todo.name }} 
  </li>
</div>

小提示 #

这两种方式都是遵循Vue的数据驱动视图原则，不像jQuery那样直接操作DOM元素。通过修改数据状态，让Vue自动帮我们更新视图，这样代码更清晰，也更容易维护~

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