Есть ли способ добавить и удалить класс с помощью директивы при щелчке элемента?
Я хочу не помещать элемент в шаблон и просто использовать директиву.
Итак, что-то вроде:
<div v-toggle-class></div>
Затем это переключит предопределенный класс, такой как .active
Вы можете использовать пользовательскую директиву и прикрепить ее к событию клика (в 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
);
}
});
