如何只给类单击元素，并在使用 Vue.js 单击其他元素时删除？ [复制]

Question

我是使用 Vue.js 创建应用程序，我遇到了一个问题，我知道如何使用 jQuery 解决这个问题，但我不知道如何在 vue 应用程序中解决这个问题，我将尝试解释我的问题简单地说，我得到了项目列表，我想给只有点击的元素特定的颜色，如果第二个元素会被点击就删除，我想用e.target来实现我的目标，有什么解决方案吗？提前致谢

new Vue({
  el: '#app',
  methods: {
    giveColor(event) {
        event.target.className += " green";
    }
  }
})

.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
  <li class="some" @click="giveColor" v-for="y in 10">
     menu  clicked {{y}}
  </li>
</div>

Answer 1

你可以这样做：

new Vue({
  el: '#app',
  data: {
    selected: 0,
  },
  methods: {
    giveColorTo(y) {
        this.selected = y;
    }
  }
})

.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
  <li class="some" @click="giveColorTo(y)" :class="{green:selected == y}" v-for="y in 10" :key="y">
     menu  clicked {{y}}
  </li>
</div>