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

您可能需要一个变量来查找当前选择的按钮。您可以使用该变量动态绑定(bind)正确的类:with : :class="{active: activeBtn === 'btn1' }"。

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

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 .