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
}

现在。单击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

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

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

2 个答案: