如何在使用多个 v-on:click 时仅绑定单个类

Question

我是新手，正在学习 Vue.js当我单击按钮时，我创建了 v-on：click 函数和元素切换类。

我不擅长英语，我认为显示代码会很快。

<button @click="bindA = !bindA">A</button>
<button @click="bindB = !bindB">B</button>
<span :class="[{ classA:bindA }, { classB:bindB }]"></span>

data: function() {
  return {
    bindA: true, // default
    bindB: false
}

就是现在。单击绑定 A 和 B。

// browser
<span class="classA classB"></span>

但我想

// bindA click , remove classB
<span class="classA"></span>
// bindB click , remove classA
<span class="classB"></span>

它在jquery中很简单，但在vue中很难。

Answer 1

这在 vue 中也非常简单。根据要查看数据的条件绑定类

  :class="{'classA': (bindA== true), 'classB':(bindA== false)}"

Answer 2

尝试向

@click添加一个方法 - 然后您可以构建更复杂的逻辑，而不是简单的"切换"。

new Vue({
  el: "#app",
  data: {
    bindA: true,
    bindB: false
  },
  methods: {
    bind(btn) {
      if ((btn === 'A' && !this.bindA) || (btn === 'B' && !this.bindB)) {
        this.bindA = !this.bindA
        this.bindB = !this.bindB
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="bind('A')">A</button>
  <button @click="bind('B')">B</button>
  <span :class="{ classA:bindA, classB:bindB }"></span>
</div>