vue 自定义指令

最新推荐文章于 2023-09-13 14:58:32 发布

小妳豆子

最新推荐文章于 2023-09-13 14:58:32 发布

阅读量181

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45719052/article/details/126195312

版权

vue自定义指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-focus="true"/>
		</div>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				//通过dirrctives  定义自定义指令
				directives:{
					//定义一个自定义指令 focus
					"focus":{ 
						//inserted 固定写法 两个参数  分被对应前dom节点  指令事件原型
						inserted(el,binding){
							//判断指令的值 如果为true  获取焦点
							if (binding.value) {
								el.focus()
							}
						}
					}
				}
			})
		</script>
	</body>
</html>