微客导航 » 文章资讯 » vue自定义指令用法经典实例小结

vue自定义指令用法经典实例小结

2023-08-25 20:54:04 334

本文实例总结了vue自定义指令用法。分享给大家供大家参考，具体如下：

自定义指令:

一、属性:

Vue.directive(指令名称,function(参数){
this.el->原生DOM元素
});

指令名称: v-red -> red

*注意:必须以v-开头

拖拽:

二、自定义元素指令:（用处不大）

Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});

自定义指令写法一：



asdfasd

Vue.directive('red',function(){
this.el.style.background='red';
});
window.onload=function(){
varvm=newVue({
el:'#box',
data:{
msg:'welcome'
}
});
};

测试示例：





www.nhooo.com自定义指令写法一






asdfasd

自定义指令写法二：推荐写法



asdfasd

//这里的color可以传参
Vue.directive('red',function(color){
this.el.style.background=color;
});
window.onload=function(){
varvm=newVue({
el:'#box',
data:{
a:'blue'
}
});
};

测试示例：





www.nhooo.com自定义指令写法二






asdfasd

自定义指令写法三：



asdfasd

Vue.directive('red',{
bind:function(){
this.el.style.background='red';
}
});
window.onload=function(){
varvm=newVue({
el:'#box'
});
};

自定义指令：拖拽drag





www.nhooo.com自定义指令：拖拽drag

自定义元素指令





www.nhooo.com自定义元素指令

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

vue自定义指令用法经典实例小结

热门推荐

随机推荐