vue2之自定义全局指令代码directive

最新推荐文章于 2024-07-28 13:07:04 发布

默默努力的小老弟

最新推荐文章于 2024-07-28 13:07:04 发布

阅读量289

点赞数

文章标签：前端 vue.js html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121442941

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义全局指令</title>
</head>
<body>
     <!-- 通过传值来改变样式 -->
	<div id="myapp">{{a}}

         <input type="text"  v-ppt="'blue'">
         <p v-mydir>
         	xxx
         </p>
	</div>
	


</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
Vue.directive("ppt",{
	bind:function(el,blinding){
           el.style.color=blinding.value;
	},
	inserted:function(el){
		el.focus();
	},
	updated:function(el){
		el.style.color="red";
	}


});

	var vm=new Vue({
		el:"#myapp",
		data:{
			a:"111"
		},
		directives:{
		  "mydir":{
		  		bind: function(el){
				el.style.color="red";
			}
		  }
			
		}


	});


</script>
</html>