按下按钮时更改列表对象的类别

Question

当我单击按钮时，我希望更改列表对象的类。 您是否有任何示例说明我如何做到这一点？

Answer 1

点击某项即可切换课程...您应该可以遵循这种格式。

https://jsfiddle.net/t716o85k/

HTML

<div id="app">
  <div v-for="item in items" :key="item.id">
    <p @click="toggle($event)"> {{ item.name }}</p>
  </div>
</div>

JS

new Vue({
  el: '#app',
  data: {
    items: [{ name: "Item1", id: "1" }, { name: "Item2", id: "2" }, { name: "Item3", id: "3" }]
  },
    methods: {
    toggle($event){
        let s = $event.target.classList;
      s.contains("my-class") ? s.remove("my-class") : s.add("my-class");
    }
  }
})

CSS

.my-class {
  background-color: yellow;
}