在click指令上切换类?

时间:2018-04-24 14:46:09

标签: vue.js vuejs2 vuejs-directive

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

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

类似于:

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

然后,这将切换预定义的类,如.active

1 个答案:

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