【前端框架Vue】高级特征之：修饰符

最新推荐文章于 2025-04-14 22:26:17 发布

程序酷巴戈

最新推荐文章于 2025-04-14 22:26:17 发布

阅读量1k

点赞数 23

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

本文链接：https://blog.youkuaiyun.com/weixin_55723857/article/details/135056269

版权

前端框架Vue 专栏收录该内容

13 篇文章

订阅专栏

本次主要介绍Vue的高级特征：修饰符；包括表单修饰符、事件修饰符、按键修饰符、和其他修饰符。

使用工具：HbuilderX

一、修饰符是什么？

在 Vue 中，修饰符是一种用于增强指令行为的方式。Vue 指令的基本形式是在指令名后加上前缀 v-，而修饰符则是在指令后以点号 . 指定的特殊标记。

二、有哪些常用的修饰符

1、表单修饰符：

在讲到v-model的时候讲过，它是实现双向绑定的基本指令。【前端框架Vue】基本指令：双向绑定v-model

trim

在用户输入内容时，很容易不小心在刚开始输入时输入空格，或在结束时输入空格，那么如何能够把输入框前或后的空格给它去掉呢？

这就需要使用到表单修饰符trim。写法示范如下：

<input v-model.trim="username">

我们敲代码来试试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优快云</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<style>
	</style>
	<body>
		<div id='app'>
			账号：<input type="text" v-model.trim='loginForm.username' />
			<br>
			密码：<input type="password" v-model='loginForm.pwd' />
			<br>
			年龄：<input type="text" v-model='loginForm.age' />
			<br>
		</div>
		<script>
			// 创建组件
			var csdn = {
				data() {
					return {
						loginForm: {
							username: 'csdnblog',
							pwd: '1234567',
							age: 20
						}
					}
				},
				methods: {}
			}
			var app = Vue.createApp(csdn)
			app.mount('#app')
		</script>
	</body>

</html>

【解释】

代码中username 加了v-model.trim，而age没有加上修饰符trim。我们从浏览器的渲染可以看到，username的值一直是前后没有空格的，而age在前面输入了空格后，传递给vue的数据中也存在空格。

number

还是沿用上面的例子，我们会发现，age这个如果只希望用户输入是数字，当输入别的字母、符号等字符的时候，都不显示。

这种时候，可以用上number这个修饰符。

<input v-model.number="age" type="number">

我们将上面部分代码中age修改一下：

年龄：<input type="number" v-model='loginForm.age' />
年龄：<input v-model.number='loginForm.age' />

在第一个例子中，age 可能是字符串或数字，具体取决于用户的输入。通过指定type为number类型，因此用户也只能输入数字。

在第二个例子中，age 会被强制为数字类型，不论用户输入的是什么。

lazy

在实现双向绑定的时候，有一个问题，就是我一在input框内输入内容时，vue也在同步变化，这容易耗损一定的性能资源，那有什么办法能够改进呢？

这种时候，可以用lazy这个修饰符。也可以叫懒加载。它是将 input 事件改为 change 事件。在默认情况下，v-model 会在 input 事件触发时同步输入框的值，使用 .lazy 可以将同步改为在 change 事件触发时同步。

<input v-model.lazy="message">

【Try】

不妨浅试一下：将上述代码中的username输入框增加一个lazy修饰符，来看看效果。

2、事件修饰符

stop

stop修饰符是用来阻止事件冒泡的。

事件冒泡，是指事件在 DOM 树中从目标元素向上层元素传播的过程。当一个事件在某个元素上触发时，它会经过该元素所属的父元素，然后再经过父元素的父元素，依次类推，直到到达 DOM 树的根节点。在这个过程中，每个经过的元素都有机会处理该事件。

也就是说，如果我要点击子元素的按钮，那么该次点击事件会一直往上触发，最顶层没有元素才停止。

看看代码展示的效果，来帮助理解：第一次点击work2，它往上冒泡到work1，所以work1的点击事件也一起做了；第二次点击work3，它依次网上冒泡到work2、work1，所以console会把这几个的日志依次打印出来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优快云</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<style>
	</style>
	<body>
		<div id='app'>
			<div class="box1" @click="work1">work1
				<div class="box2" @click="work2">work2
					<br>
					<button type="button" @click="work3">work3</button>
				</div>

			</div>
		</div>
		<script>
			var csdn = {
				data() {
					return {
						loginForm: {
							username: 'csdnblog',
							pwd: '1234567',
							age: 20
						}
					}
				},
				methods: {
					work1() {
						console.log('work1')
					},
					work2() {
						console.log('work2')
					},
					work3() {
						console.log('work3')
					},
				}
			}
			var app = Vue.createApp(csdn)
			app.mount('#app')
		</script>
	</body>

</html>

那么stop 用来阻止事件冒泡，也就是要实现，点击子元素，就显示子元素的事件或渲染，点击父元素，就只显示父元素的事件或渲染。

它的写法也很简单：直接在click事件后加.stop

<a @click.stop="doThis"></a>

那么在案例代码中修改后，结果如下：

<div class="box1" @click="work1">work1
	<div class="box2" @click.stop="work2">work2
		<br>
		<button type="button" @click.stop="work3">work3</button>
	</div>
</div>

prevent

prevent 用来阻止默认行为，很典型也很好理解的就是html中的a标签。我们直接在源代码中加入两行

<div id='app'>
    <hr />
    <a href="https://www.baidu.com" >百度1</a>
    <br />
    <a href="https://www.baidu.com" @click.prevent='work3'>百度2</a>
</div>

渲染后，分别单击按钮1、2，可以发现不同。1直接跳转进入百度搜索框，而2则在console打印了日志。