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";
}
}
})