在点击指令上切换 class？

Question

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

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

所以像这样：

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

然后这将切换预定义的 class，例如 .active

Answer 1

您可以使用 custom directive 并附加到那里的点击事件（在 bind 挂钩中）。

编辑：修改为使用元素数据上下文来存储 class 活动标志

举个简单的例子：

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
    );
  }
});

在点击指令上切换 class？

Toggle class on click directive?

vue.js

vuejs2

vue-directives