Javascript 无法在Vue指令内添加/删除/切换元素类？

这项工作：

但是，当我将此代码放在vue指令中时，会触发按钮事件，控制台显示该类已删除，但是没有任何视觉变化

下面是一个例子：

指令代码也在下面（为了安抚stackoverflow的规则）

风格

.hide {
  display: none;
}

Vue.directive('hide-for', {
    bind(button, b, vnode, oldVnode) {
        console.log(b);
        var elsToToggle = document.querySelectorAll(`[hide-name="${b.value}"]`);
        console.log(button, b.value, `[hide-name="${b.value}"]`, elsToToggle);

        button.addEventListener('click', (b) => {
            console.log(button, " clicked");
            elsToToggle.forEach((el) => {
                console.log(el);
                el.classList.toggle('hide');
            })
        }, false)
    }
});

var app = new Vue({
  name: "test",
  el: '#app',
  data: {}
})

html

<div id="app">
  <button v-hide-for="'uniqueID'">toggle to show?</button>
  <div class="hide" hide-name="uniqueID">
    Hello! :D
  </div>
</div>

---

因此，我从另一个角度尝试了这一点，并将“hide name”属性也设置为一个指令，然后单击发出“uniqueID”，该指令由“hide name”指令拾取

我仍然不确定为什么Vue没有在视觉上更新浏览器，但我猜这一定与“虚拟dom”有关

演示：

---

因此，我从另一个角度尝试了这一点，并将“hide name”属性也设置为一个指令，然后单击发出“uniqueID”，该指令由“hide name”指令拾取

我仍然不确定为什么Vue没有在视觉上更新浏览器，但我猜这一定与“虚拟dom”有关

演示：

Vue.directive('hide-for', {
    bind(el, b, vnode) {
        el.addEventListener('click', (event) => vnode.context.$emit(b.value, event) );
    }
});

Vue.directive('hide-name', {
    bind(el, b, vnode, oldVnode) {
        vnode.context.$on(b.value, function(){
            let hasHideClassAttr = el.getAttribute('hide-class');
            if(hasHideClassAttr) hasHideClassAttr.split(' ').forEach((c) => el.classList.toggle(c) );
            else el.classList.toggle('hide');
        });
    }
});