有没有办法在单击元素时使用指令添加和删除类?
我想避免将元素放入模板中,只需使用指令。
类似于:
<div v-toggle-class></div>
然后,这将切换预定义的类,如.active
答案 0 :(得分:1)
您可以使用custom directive并附加到点击事件(在bind
挂钩中)。
编辑:修改为使用元素数据上下文来存储类活动标志
只是一个简单的例子:
Vue.directive("toggle-active", {
bind: function(el, binding, vnode) {
el.addEventListener(
"click",
() => {
let active = vnode.context.class_active;
active = !active;
vnode.context.class_active = active;
if (!active) {
el.classList.remove("active");
el.classList.add("not-active");
} else {
el.classList.remove("not-active");
el.classList.add("active");
}
},
false
);
}
});