1. 什么是自定义指令?
就是自己设置的 v-属性,详细请看实例
2. 需要用到什么属性?
- directive(name,callback);
name:指令名字
callback:回调函数 - binding:自定义绑定的指令
3. 实例代码
html
<div id="app">
<p v-color="red">红色 hello world</p>
<p v-color="">绿色 hello world</p>
</div>
javascript
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//全局注册
Vue.directive("color",function(el,binding){
if(binding.value){//如果有传值用传值,如果没有则默认green
el.style.color=binding.value;
}else{
el.style.color="green";
}
console.log(binding);
})
var vm = new Vue({
el:"#app",
data:{
red:"red",
yellow:"yellow"
}
})
//局部注册TODO...
</script>
效果
![](https://img.haomeiwen.com/i15605295/b641f5858385678a.png)
网友评论