单击时如何更改特定(此)按钮类.使用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

您可能需要一个变量来查找当前选择的按钮.您可以使用该变量动态绑定正确的类: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>

看这里的工作小提琴.