首页 > 代码库 > vue(2) - 自定义指令
vue(2) - 自定义指令
我们都知道v-for、v-html、等等都是指令：扩展html 语法
自定义指令：
属性指令
Vue.deirctive(指令名称，function(){
this.el ==>原生的dom元素
})
<div id="box">
<span v-red>1222</span>
</div>
<script>
Vue.directive(‘red‘,function(){
this.el.style.background="red"
});
new Vue({
el:"#box",
data:{}
})
</script>
或者用参数的方法
<div id="box">
<span v-red="‘blue‘">1222</span>
</div>
<script>
Vue.directive(‘red‘,function(color){
this.el.style.background=color
});
new Vue({
el:"#box",
})
</script>
指令名称： v-red ===> red
需要注意的必须以v-开头
自定义元素的指令(用处不是很大)
Vue.elementDirecitive(“zns-red”，{
bind:function(){
this.el.style.background="red";
}
})
<div id="box">
<zns-red>1222</zns-red>
</div>
<script>
Vue.elementDirective(‘zns-red‘,{
bind:function(){
this.el.style.background=‘red‘
}
});
new Vue({
el:"#box",
})
</script>
vue(2) - 自定义指令
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。