单击时如何更改特定（此）按钮 class。使用 Vue.js 2.0

Question

单击任何按钮时，它们都将变为活动状态。所以我想要的只是应该改变点击的那个。

var vm = new Vue({
 el: '#toolBtns',
 data: {
  isActive: false
 },
 computed: {
  activeClass: function () {
   return {
    active: this.isActive
   };
  }
 }
});

<div class="btn-group" role="group" id="toolBtns">
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn1</button>
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn2</button>
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn3</button></div>

Answer 1

您可能需要一个变量来查找当前 select 哪个按钮。您可以使用该变量动态绑定正确的 class: 和 : :class="{active: activeBtn === 'btn1' }"。

这种方法的好处是您只有一个变量而不是数组来保存当前 select 哪个按钮，因此您不必每次 select 一个按钮时都在数组上迭代。

var vm = new Vue({
  el: '#toolBtns',
  data: {
   activeBtn:''
  }
 });

.active{
  background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="toolBtns">
<div class="btn-group" role="group" id="toolBtns">
  <button class="btn" type="button" @click="activeBtn = 'btn1'" :class="{active: activeBtn === 'btn1' }">Btn1</button>
  <button class="btn" type="button" @click="activeBtn = 'btn2'" :class="{active: activeBtn === 'btn2' }">Btn2</button>
  <button class="btn" type="button" @click="activeBtn = 'btn3'" :class="{active: activeBtn === 'btn3' }">Btn3</button></div>
</div>

查看工作 fiddle here。

Answer 2

上述解决方案的方向是正确的，但由于直接使用索引，因此很容易出错。正如上面的答案所建议的那样，做一个 v-for 基本上可以解决你的问题。

var vm = new Vue({
 el: '#toolBtns',
 data: {
    buttons:[{name:'Btn1',active:false},{name:'Btn2',active:false},
            {name:'Btn3',active:false}]
 },
 methods: {
   toggleActiveClass:function(index){
     this.buttons[index].active=!this.buttons[index].active;
   }
  }
});


 <div class="btn-group" role="group" id="toolBtns">
   <button v-for="(btn, index) in buttons" type="button" 
               @click="toggleActiveClass(index)"
              :class="{active: btn.active}">{{btn.name}}
   </button>
 </div>

工作fiddle：https://jsfiddle.net/z11fe07p/547/

Answer 3

您不需要设置'isActive: false'，也不需要为每个项目绑定isActive。你可以这样做： 1、声明一个数组，叫做'candidates'，那么每个被点击的项目都会被推入候选人。 2，声明一个名为 'contains()' 的函数，它检查一个项目是否在 candidates 数组中。 3、为每一项绑定contains()。 4、在CSS中，给'clicked'一些样式。

html代码：

<body>
    <div id="toolBtns">
        <button v-for="item in buttons" v-on:click="provide(item)" v-bind:class="{clicked: contains(candidates, item)}" type="button">{{ item.name }}
        </button>
    </div>
</body>

javascript代码：

var toolBtns = new Vue({
el: '#toolBtns',
data: 
{
    buttons: [
        {name: 'Btn1'},
        {name: 'Btn2'},
        {name: 'Btn3'},
    ],
    candidates: [],
},
methods:
{
    provide: function(item)
    {
        if(this.candidates.indexOf(item) == -1)
        {
            this.candidates.push(item);
        }
        else
        {
             this.candidates.splice(this.candidates.indexOf(item), 1);
        }
    },
    contains: function(arr, item)
    {
        return arr.indexOf(item) != -1;
    },
}
});

CSS代码

.clicked{
    background-color: red;
}

这是 jsfiddle 示例 https://jsfiddle.net/JoyAndBrave/anzdzq4L/6/

单击时如何更改特定（此）按钮 class。使用 Vue.js 2.0

How to change a specific (this) button class when click on. Using Vue.js 2.0

bind

class

vue.js

vuejs2