在一些后台管理系统，可能需要根据用户角色进行一些操作权限的判断，很多时候可以给元素添加v-if/v-show来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，可以通过全局自定义指令来处理。完成自定义指令v-permission，如果接收的值在权限数组内则显示，否则移除该DOM

可以通过Vue的directive API来实现自定义指令v-permission，以下是一个基础示例：

// main.js
import Vue from 'vue';
import App from './App.vue';

Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    const permissionArr = vnode.context.$store.getters.permissionArr; // 假设权限数组保存在Vuex的state中
    if (!permissionArr.includes(binding.value)) {
      el.parentNode.removeChild(el);
    }
  }
});

new Vue({
  render: h => h(App),
}).$mount('#app');

上述代码中，我们定义了一个全局指令v-permission，通过inserted钩子函数在DOM插入时进行权限判断，如果接收的值不在权限数组中，则移除该DOM。

在组件中使用v-permission指令：

<template>
  <div>
    <p v-permission="'admin'">只有管理员才能看到这句话</p>
    <p v-permission="'user'">只有普通用户才能看到这句话</p>
  </div>
</template>

上述代码中，我们通过v-permission指令进行权限判断，如果当前用户的权限数组中包含'admin'，则第一句话会显示，否则会被移除；同理，如果当前用户的权限数组中包含'user'，则第二句话会显示，否则会被移除。

需要注意的是，该示例中的权限数组是假设保存在Vuex的state中，实际项目中可能需要根据实际情况进行修改。