vue按钮权限控制

src/common/array.js
可以根据需要修改

export function checkArray(key){
    // 
    let arr = ['1','2','5','9']
    let index = arr.indexOf(key)
    if(index>-1){
        return true
    }else{
        return false
    }
}

自定义指令
main.js或者单独提出来

import {checkArray} from './common/array'
Vue.directive('display-key',{
  inserted(el,binding){
    let displayKey = binding.value
    if(displayKey){
      let hasPermission  = checkArray(displayKey)
      if(!hasPermission){
        el.parentNode && el.parentNode.removeChild(el)
      }
    }else{
      throw new Error(`need key! Like v-display-key='' `)
    }

  }
})

页面

<div v-display-key = "'1'">
      <button>按钮一</button>
    </div>
    <div v-display-key = "'2'">
      <button>按钮二</button>
    </div>
    <div v-display-key = "'3'">
      <button>按钮三</button>
    </div>
      <div v-display-key = "'4'">
      <button>按钮四</button>
    </div>

效果：只显示按钮一、按钮二