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

Posted 2023-02-23

【中文标题】使用多个 v-on:click 时如何仅绑定单个类？

【英文标题】：How to binding only single class when using several v-on:click?

【发布时间】：2019-10-31 15:49:10

【问题描述】：

我是新手，正在学习 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难。

【参考方案1】：

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

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

【讨论】：

bindA == true 不是必需的。 :class=" 'classA': bindA, 'classB': bindB "就够了

此解决方案是通过单击任一按钮来切换类。据我了解，这不是问题 - 如果单击 btnA 则应添加 A 类，但如果单击 btnB 则不添加，反之亦然。所以它比这更复杂。

【参考方案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>

【讨论】：

数据应该返回一个函数 ;)

不——仅在单个文件组件中。数据返回一个函数，因为这确保了该组件与同一组件的其他实例是分开的。如果我们只有一个（Vue 实例），那么它就是一个对象。

这就是为什么我们都在这里：D

实际上不仅在单个文件组件中，而且在一般组件中 - vuejs.org/v2/guide/components.html :)

是的！我确实检查了文档，我有他的误解，认为不返回一个会影响反应性的函数，但你是对的，它仅适用于可重用的组件，在上面的示例中，特别是在 dom 中应该只有一个应用程序