vue.js - 在点击指令上切换类？

Question

有没有办法在单击元素时使用指令添加和删除类？

我想避免将元素放入模板中，而只使用指令。

所以像：

<div v-toggle-class></div>

然后这将切换一个预定义的类，如.active

Answer 1

您可以使用自定义指令并附加到那里的点击事件（在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
    );
  }
});