Vue-custom command to implement permission verification

Use custom instructions to achieve permission verification

// directive.js
// Controls the display of elements
Vue.directive('premission1'.function(el, obj){
  // Control the value of display
  el.style.display = obj.value > 3? 'none': 'block'; 
});

// Control whether elements are loaded or not; need hook function instered
Vue.directive('premission2', {inserted(el, obj) {
    Emitted when the bound element has been vue compiled and inserted into the DOM
    obj.value > 3? el.parentNode.removeChild(el): null; }});Copy the code

 <! -- HTML page part code -->
 <h1 v-premission1='3'>I show</h1>
 <h1 v-premission1='5'>I don't show</h1>

 <h1 v-premission2='2'>I'm loaded</h1>
 <h1 v-premission2='4'>I don't load</h1>
Copy the code

! Note: For both global and local custom directives, this in the function corresponding to the directive is a window, not the current instance