Как привязать только один класс при использовании нескольких v-on: click?

Question

Я новичок и изучаю Vue.js Я создаю v-on: функция щелчка и класс переключения элементов, когда нажимаю кнопку.

Я плохо владею английским языком, я думаю, что будет быстро показать код.

<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
}

это сейчас. нажал bindA и 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

Попробуйте добавить метод к @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>

Answer 2

Это очень просто.Привязать класс в соответствии с условиями вы хотите увидеть данные

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