vue 事件修饰符与按键修饰符

2024-05-14 08:17:23

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

 .stop ：阻止事件冒泡到父元素
 .prevent：阻止默认事件发生
 .capture：使用事件捕获模式
 .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
 .once：只执行一次

@click.stop阻止冒泡

<body><script src="./node_modules/vue/dist/vue.min.js"></script><style>#app div{border: 1px solid red;padding: 20px;}</style><div id="app"><div @click="alert">大div<div @click.stop="alert">小div</div></div></div><script>var app = new Vue({el: '#app',methods: {alert() {alert("点击了");}}})</script>
</body>

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
全部的按键别名：
 .enter
 .tab
 .delete (捕获“删除”和“退格”键)
 .esc
 .space
 .up
 .down
 .left
 .right

<body><div id="app"><input  @keyup.enter="alert" value="按enter键"></div><script>var app = new Vue({el: '#app',methods: {alert() {alert("点击了");}}})</script>
</body>

组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
 .ctrl
 .alt
 .shift

<input  @click.ctrl="alert" value="组合按钮ctrl+鼠标点击">

vue 事件修饰符与按键修饰符相关推荐

事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符
事件绑定 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head&g ...
五、伊森商城前端基础-Vue v-on 事件修饰符按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
22. Vue keycodes按键修饰符
需求在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup事件,并且还要使用按键修饰符来指定按下的键盘按钮. 下面来看看另一个需求来逐步认识一下按钮 ...
Vue事件绑定（非常详细哦~）
下面是对Vue中事件绑定的整理,希望可以帮助到有需要的小伙伴~ 事件绑定 vue如何处理事件 v-on指令用法 <input type= 'button"v-on:click=&quo ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)
01- vue是什么: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...
vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...

最新文章

热门文章