现在有这么一个需求，我们页面当中有很多按钮，我们需要根据后端返回来的数据进行对这个按钮进行显示隐藏，这时时候我们可以通过 自定义指令来对这些按钮进行显示隐藏。
1. array.js 后端返回的数据进行判断
export function checkArr(key) {
let arr = [1, 2, 3, 4, 5]
if(arr.indexOf(key)>-1) {
return true;
} else {
return false;
}
}
2. main.js
这里的判断比较少，我们直接在 main.js 中进行操作，如果逻辑比较复杂的话，我们需要新建一个文件，进行自定义指令。
import {checkArr} from './common/array.js'
Vue.directive('display-key', {
inserted(el, binding) {
console.log(binding, 'binding')
let displayKey = binding.value;
console.log(displayKey, 'displayKey')
console.log(el, 'el')
if(displayKey) {
let hasKey = checkArr(displayKey);
if(!hasKey) {
// 如果没有key值，删除这个el删除
el.parentNode && el.parentNode.removeChild(el);
}
} else {
throw new Error('需要一个Key值')
}
}
})
3. 在组件中进行测试
<button v-display-key="1">按钮1</button>
<button v-display-key="3">按钮2</button>
<button v-display-key="5">按钮3</button>
<button v-display-key="7">按钮4</button>
<button v-display-key="9">按钮5</button>
<button v-display-key="10">按钮6</button>
