Vuejs2 与vuejs中的v-if类似的自定义指令

我正在用vue编写一个自定义指令

我希望它能像

v-if

一样工作，但它里面会有一点逻辑。让我举例说明：

<button v-permission="PermissionFoo">Do Foo</button>

但我不想让这个元素留在文档中。因此，我正在寻找CSS以外的另一种方法，因为它也必须像

v-if

那样从DOM中删除。

尝试使用以下方法：

Vue.directive('permission', (el, binding, vnode) => {
  if (!isUserGranted(binding.value)) {
    // replace HTMLElement with comment node
    const comment = document.createComment(' ');
    Object.defineProperty(comment, 'setAttribute', {
      value: () => undefined,
    });
    vnode.elm = comment;
    vnode.text = ' ';
    vnode.isComment = true;
    vnode.context = undefined;
    vnode.tag = undefined;
    vnode.data.directives = undefined;

    if (vnode.componentInstance) {
      vnode.componentInstance.$el = comment;
    }

    if (el.parentNode) {
      el.parentNode.replaceChild(comment, el);
    }
  }
});

---

UPD 05-19-2017：我的最新代码。我定义

setAttribute（）

并检查

vnode.componentInstance

以防止在与html元素和Vue组件一起使用时出现js错误。

这是一个很好的答案，但它会在控制台中显示“无法设置未定义的属性”$el'。当我删除vnode.componentInstance时，效果非常好。$el=comment；因为在我的例子中，组件常量是未定义的。谢谢，其他人有这样的问题吗？组件数据更改时会创建空html标记？如果您在使用vue test utils

el时正在寻找类似于v-if的功能，那么这将无法通过任何单元测试。parentElement

始终为空。然而，当检查时，它不是。。。这使得这不可行

Vue.directive('permission', (el, binding, vnode) => {
  if (!isUserGranted(binding.value)) {
    // replace HTMLElement with comment node
    const comment = document.createComment(' ');
    Object.defineProperty(comment, 'setAttribute', {
      value: () => undefined,
    });
    vnode.elm = comment;
    vnode.text = ' ';
    vnode.isComment = true;
    vnode.context = undefined;
    vnode.tag = undefined;
    vnode.data.directives = undefined;

    if (vnode.componentInstance) {
      vnode.componentInstance.$el = comment;
    }

    if (el.parentNode) {
      el.parentNode.replaceChild(comment, el);
    }
  }
});