如何在单击时更改特定(此)按钮类。使用Vue.js 2.0
如何在单击时更改特定(此)按钮类。使用Vue.js 2.0
提问于 2017-02-06 15:34:40
当单击任意按钮时，它们都将变为活动状态。所以我想要的只是被点击的那个应该被改变。
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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-02-06 15:39:35
您可能需要一个变量来查找当前选择了哪个按钮。您可以使用该变量动态绑定正确的class: 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>
请参见working fiddle here。
Stack Overflow用户
发布于 2017-11-17 18:03:55
您不需要设置' isActive : false'，也不需要将isActive绑定到每个项。你可以这样做: 1，声明一个数组，叫做' candidates '，然后点击的每一项都会被推送到candidates中。2，声明一个函数，名为'contains()‘，该函数检查一个项是否在候选数组中。3，绑定包含()到每一项。4，在CSS中，给‘点击’一些样式。
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/
Stack Overflow用户
发布于 2017-02-06 16:08:11
上面的解决方案的方向是正确的，但它很容易出错，因为它直接使用了索引。正如上面的答案所建议的，做一个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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42062491
复制相关文章
相似问题
腾讯云开发者
