Vue中的事件修饰符，按键修饰符

最新推荐文章于 2024-07-04 10:21:44 发布

叶卡捷琳堡

最新推荐文章于 2024-07-04 10:21:44 发布

阅读量351

点赞数 1

分类专栏： # vue 文章标签： vue 事件修饰符按键修饰符

本文链接：https://blog.csdn.net/weixin_46841376/article/details/118713211

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

- - 修饰符
  - - 1.事件修饰符
    - 2.按键修饰符

修饰符

1.事件修饰符

vue中提供的事件修饰符一共有4种

.stop：用来阻止事件冒泡（防止事件向父标签传递）
.prevent：用来阻止标签的默认行为
.self：只监听自身标签触发的事件
.once：该事件只触发一次

语法：

@事件名.事件修饰符=“事件处理函数”

例：@click.stop=“test”，给click加了一个stop修饰的事件

具体代码内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<h1>{{message}}</h1>
			<input type="button" value="弹出test" @click="test" />
			<br><br>
			<h3>stop修饰符</h3>
			<!-- 演示.stop事件修饰符 -->
			<div id="p" style="width: 100px;height: 100px; background-color: #FF0000;" @click="parent">
				<div id="c" style="width: 50px; height: 50px; background-color: aquamarine;" @click.stop="child">
					
				</div>
			</div>
			<h3>prevent修饰符</h3>
			<!-- 
				演示.prevent事件修饰符
				使其不触发默认行为，只触发一个方法
			-->
			<a href="http://www.baidu.com" @click.prevent="testa">点我</a>
			
			<h3>self修饰符</h3>
			<!-- .self修饰符，只触发自身的修饰符 -->
			<!-- 给parent加修饰符，使其只监听parent，不监听传上来的事件 -->
			<div id="p" style="width: 100px;height: 100px; background-color: #FF0000;" @click.self="parent">
				<div id="c" style="width: 50px; height: 50px; background-color: aquamarine;" @click="child">
					
				</div>
			</div>
			<h3>once修饰符</h3>
			<input type="button" value="事件只触发一次" @click.once="test" />
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					message:"事件修饰符"
				},
				methods:
				{
					test(){
						alert("test")
					},
					parent(){
						alert("parent")
					},
					child(){
						alert("child")
					},
					testa(){
						alert("testa")
					}
				},
				
			})
		</script>
	</body>
	
</html>

2.按键修饰符

事件修饰符可以对所有事件进行修饰

按键修饰符用于对键盘事件进行修饰

键盘事件：比如keyup，keydown等等

vue中的键盘修饰符

.enter：对回车键修饰
.tab：对tab键修饰
.delete（捕获删除和退格键）
.esc：对esc修饰
.space：对空格修饰
.up：对上
.down：对下
.left：对左
.right：对右

只有在按下某些键时才触发事件

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键修饰符</title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<h3>{{message}}</h3>
			<!-- 在删除和回车的时候触发 -->
			<input type="text" v-model="name" @keyup.enter.delete="keyup" />
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{
					message:"按键修饰符",
					name:""
				},
				methods:
				{
					keyup(){
						alert(this.name)
					}
				}
			})
		</script>
	</body>
</html>

叶卡捷琳堡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的事件修饰符，按键修饰符

文章目录修饰符1.事件修饰符2.按键修饰符修饰符1.事件修饰符vue中提供的事件修饰符一共有4种.stop：用来阻止事件冒泡（防止事件向父标签传递）.prevent：用来阻止标签的默认行为.self：只监听自身标签触发的事件.once：该事件只触发一次语法：@事件名.事件修饰符=“事件处理函数”例：@click.stop=“test”，给click加了一个stop修饰的事件具体代码内容<!DOCTYPE html><html> <head>
复制链接

扫一扫

专栏目录