Vue2.x Cli3.x 自定义指令

About.vue

<template>
  <div class="about">
    <h1 v-rainbow>This is an about page</h1>
    <h2 v-them:bgblue="'green'">Hello</h2>
  </div>
</template>

main.js

// 自定义指令无参数
Vue.directive('rainbow',{
  bind(el,binding,vnode){
    el.style.color = "red";
  }
})

// 自定义指令有参数
Vue.directive('them',{
  bind(el,binding,vnode){
    if(binding.value == 'red'){
      el.style.color = "red";
    } else if(binding.value == 'green'){
      el.style.color = "green";
    }
    
    if(binding.arg == 'bgyellow'){
      el.style.background = "yellow";
    } else if(binding.arg == 'bgblue'){
      el.style.background = "blue";
    }
  }
})