小编Gee*_*osh的帖子

我正在尝试解决如何制作自定义 Vue 条件指令。我知道我可以编写一个全局方法并在 v-if 中调用它，但为了代码清晰，我想要一个自定义指令。

目的是用指令装饰一个元素并将 Guid 传递给它（这一切都是为了根据用户权限处理条件 rednering）： v-permission="'4ECE1FD4-4019-4CA2-AB9E-0A555CCBDB5B'"

目前，我只是display: none在指令的bind方法中添加 到元素，这对于隐藏内容很好，但如果元素从未被渲染，那么性能会更好。

我有什么想法可以实现这一目标吗？

当前指令代码如下：

import Vue from 'vue'

Vue.directive('permission', {
  bind: function (el, binding, vnode) {
    if (binding.value) {
      let hasPermission = 
vnode.context.$store.getters.hasApiPermission(binding.value)
      if (!hasPermission) {
        el.style.display = 'none'
      }
    } else {
      console.error('You must specify a permission ID')
    }
  }
})