码迷,mamicode.com
首页 > 其他好文 > 详细

vue(2) - 自定义指令

时间:2017-08-02 20:24:58      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:color   str   script   data   dir   dom   asc   pre   java   

我们都知道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) - 自定义指令

标签:color   str   script   data   dir   dom   asc   pre   java   

原文地址:http://www.cnblogs.com/sun927/p/7275820.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!