Vue - 激活 VNode 调整答案

【问题标题】：Vue - Activate VNode AdjustmentVue - 激活 VNode 调整
【发布时间】：2018-08-20 07:46:18
【问题描述】：

我有一个 Vue 指令，它为 VNode 添加了一个条件类。这是一个简短的摘录：

Vue.directive('editable', {
  bind (el, binding, vnode) {
    vnode.data.class = {'hidden': var}
  }
})

为了测试建议，我将var替换为true，只是为了看看这部分实现是否有效。
如果我现在检查 VNodes 数据，我可以看到这个条件类，看起来就像我直接将它添加到模板中的元素一样。但相比之下，类没有添加到 DOM 元素中，因此类属性不可见。
那么如何才能使 VNode 上的这些更改有点活跃呢？
谢谢！

【问题讨论】：

我猜你有一个错字，意思是“添加”。然后是的，如果变量是true，我想添加css类hidden。所以就像它通常在 Vue 中完成的那样，但是通过使用指令，而不是直接在元素上执行。
抱歉错字......
不，只是为了清除我回答的基础。

标签： vue.js vuejs2

【解决方案1】：

你得到的第一个参数是el 这是指令所在的元素。

您可以在添加新 CSS 类的情况下直接使用此参数来操作 DOM 元素

Vue.directive('editable', { 
    bind (el, binding, vnode) { 
         if(condition){
             el.className += " " + "hidden";
         }
   }
})

【讨论】：

对不起，但这无济于事。您的条件在绑定后评估一次。如果以后条件成立，那是行不通的。我想要this 之类的东西，可以根据数据对象切换类。
@weilbith 那么你应该使用普通的:class 绑定