Vue.js在单击时切换类
Vue.js在单击时切换类
提问于 2015-11-16 17:22:17
如何在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作为类应用，如下所示：
<th class="initial active" v-on="click: myFilter">
<span class="wkday">M</span>
</th> 这需要切换，即每次单击它都需要添加/删除类。
回答 9
Stack Overflow用户
回答已采纳
发布于 2015-11-16 19:55:58
您可以让活动类依赖于一个布尔数据值：
<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
}
}
})Stack Overflow用户
发布于 2017-05-09 00:28:13
不需要一种方法：
// html element, will display'active' class if showMobile is true
//clicking on the elment will toggle showMobileMenu to true and false alternatively
<div id="mobile-toggle"
:class="{ active: showMobileMenu }"
@click="showMobileMenu = !showMobileMenu">
</div>
//in your vue.js app
data: {
showMobileMenu: false
}Stack Overflow用户
发布于 2018-08-20 04:55:00
如果您不需要从元素外部访问切换，则此代码无需数据变量即可工作：
<a @click="e => e.target.classList.toggle('active')"></a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33731939
复制相关文章
相似问题