本文介绍了单击Vue.js切换类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在vue.js中切换类?
How does toggle a class in vue.js?
我有以下内容:
<th class="initial " v-on="click: myFilter">
<span class="wkday">M</span>
</th>
new Vue({
el: '#my-container',
data: {},
methods: {
myFilter: function(){
// some code to filter users
}
}
});
当我单击th
时,我想将active
用作类,如下所示:
When I click th
I want to apply active
as a class as follows:
<th class="initial active" v-on="click: myFilter">
<span class="wkday">M</span>
</th>
这需要进行切换,即每次单击时都需要添加/删除课程.
This needs to toggle i.e. each time its clicked it needs to add/remove the class.
推荐答案
您可以让活动类依赖于布尔数据值:
You could have the active class be dependent upon a boolean data value:
<th
class="initial "
v-on="click: myFilter"
v-class="{active: isActive}">
<span class="wkday">M</span>
</th>
new Vue({
el: '#my-container',
data: {
isActive: false
},
methods: {
myFilter: function() {
this.isActive = !this.isActive;
// some code to filter users
}
}
})
这篇关于单击Vue.js切换类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!