Vue模板事件修饰符、按键修饰符、系统修饰符
【摘要】 文章目录修饰符1.事件修饰符2.按键修饰符修饰符1.事件修饰符vue中提供的事件修饰符一共有4种.stop：用来阻止事件冒泡（防止事件向父标签传递）.prevent：用来阻止标签的默认行为.self：只监听自身标签触发的事件.once：该事件只触发一次语法：@事件名.事件修饰符=“事件处理函数”例：@click.stop=“test”，给click加了一个stop修饰的事件具体代码内容<!D...
修饰符
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>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）