vue实现列表项点击改变状态

实现点击列表变色再次点击恢复，可以通过给每个列表项添加一个状态，来判断是否被点击过，然后根据状态来动态改变样式。

以下是一个简单的Vue代码实现：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" :class="{ 'active': item.active }" @click="toggleActive(index)">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: 'item1', active: false },
        { text: 'item2', active: false },
        { text: 'item3', active: false },
        { text: 'item4', active: false }
      ]
    };
  },
  methods: {
    toggleActive(index) {
      this.list[index].active = !this.list[index].active;
    }
  }
};
</script>

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

在上面的代码中，我们使用了v-for指令来遍历列表项，并给每个列表项绑定了一个点击事件。在点击事件中，我们调用了toggleActive方法来切换列表项的状态，从而改变样式。

同时，我们使用了:class指令来动态绑定类名。当列表项的状态为active时，会添加active类，从而改变样式。

在样式中，我们定义了.active类，用来改变背景颜色。

这样，当我们点击列表项时，就会切换其状态，从而改变样式。再次点击时，状态会再次切换，样式也会相应改变。