vue自定义指令用法示例

漫漫人生路^_^

已于 2022-03-18 10:38:17 修改

阅读量405

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-03-17 23:26:53 首次发布

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/qq_46198929/article/details/123563479

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1><span v-big="n"></span></h1>
		</div>
		<script>
			new Vue({
				el:'#app',
				data(){
					return{
						n:1
					}
				},
				directives:{
					big(a,b){
						console.dir(a);
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>n的值为<span v-big="n*6"></span></h1>
			<h1><span v-text="n"></span></h1>
		</div>
		<script>
			new Vue({
				el:'#app',
				data(){
					return{
						n:1
					}
				},
				directives:{
					big(element,binding){
						element.innerText=binding.value*100
						console.dir(a);
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
input输入框自动获取焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>n的值为<span v-big="n*6"></span></h1>
			<h1><span v-text="n"></span></h1>
			<button type="button" @click="n++">点我n++</button>
			<input type="text" v-fbind:value="n">
		</div>
		<script>
			new Vue({
				el:'#app',
				data(){
					return{
						n:1
					}
				},
				directives:{
					big(element,binding){
						element.innerText=binding.value*100
					},
					fbind:{
						bind(element,binding){
							element.value=bindng.value
						},
						inserted(element,binding){
							element.focus()
						},
						update(element,binding){
							element.value=binding.value
						}
					}
				}
			})
		</script>
	</body>
</html>

漫漫人生路^_^

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自定义指令</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1><span v-big="n"></s
复制链接

扫一扫