vue自定义指令

最新推荐文章于 2023-07-03 17:05:53 发布

GHUIJS

最新推荐文章于 2023-07-03 17:05:53 发布

阅读量67

点赞数

分类专栏： vuejs

本文链接：https://blog.csdn.net/m0_43599959/article/details/108924034

版权

vuejs 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

玩过vue的大伙肯定了解过vue指令，例如：v-html,v-for...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="app">
			<div v-color="'red'">Ghui</div>
			<div v-color="'blue'">YGHH</div>
		</div>
	</body>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		Vue.directive("color",(ele,data) => {
			console.log(ele,data);
			ele.style.color = data.value;
		})
		
		new Vue({
			el:".app",
			data(){
				return{
				}
			}
		})
	</script>
</html>

Vue.directive(str,fn)

directive就是vue的自定义指令方法，可传两个参数，一是指令名，二是指令回调；

回调函数也可两参数，一是使用了该指令的元素，二是指令值；

上述代码实现了定义颜色的自定义指令，看效果：

~~Ghui,自律，坚持~~

GHUIJS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义指令

玩过vue的大伙肯定了解过vue指令，例如：v-html,v-for...<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="app"> <div v-color="'red'">Ghui</div> &
复制链接

扫一扫