官网参考：https://cn.vuejs.org/v2/guide/custom-directive.html
https://cn.vuejs.org/v2/api/#directives
局部指令
案例说明：根据"isAddColor"值判断是否改变字体颜色
<template>
<div>
<h1 v-change-color="isAddColor?colorValue:''">根据"isAddColor"值判断是否改变字体颜色</h1>
</div>
</template>
<script>
export default {
data(){
return {
isAddColor: true,
colorValue: '#f00'
}
},
directives: {
/*
* parem: el:指令所绑定的元素;binding:绑定的相关参数
* */
changeColor: function(el,binding){
el.style.color = binding.value
}
}
}
</script>
全局自定义指令
// 注册一个全局自定义指令 v-change-color
Vue.directive('changeColor',{
// 被绑定元素插入父节点是调用
inserted: function (el,binding) {
el.style.color = binding.value
}
})
