vue基础事件＼按键修饰符

灰太狼 2021-10-09 03:32 366阅读 0赞

### 事件修饰符 ###

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

*  `.stop`
 *  `.prevent`
 *  `.capture`
 *  `.self`
 *  `.once`

<a v-on:click.stop="doThis"></a>
    
    <form v-on:submit.prevent="onSubmit"></form>
    
    <a v-on:click.stop.prevent="doThat"></a>
    
    <form v-on:submit.prevent></form>
    
    <div v-on:click.capture="doThis">...</div>
    
    <div v-on:click.self="doThat">...</div>
    
    
    <a v-on:click.once="doThis"></a>

### 按键修饰符 ###

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<input v-on:keyup.enter="submit">
    
    <input @keyup.enter="submit">

全部的按键别名：

*  `.enter`
 *  `.tab`
 *  `.delete` (捕获 "删除" 和 "退格" 键)
 *  `.esc`
 *  `.space`
 *  `.up`
 *  `.down`
 *  `.left`
 *  `.right`
 *  `.ctrl`
 *  `.alt`
 *  `.shift`
 *  `.meta`

实例

<p>
    <input @keyup.alt.67="clear">
    
    <div @click.ctrl="doSomething">Do something</div>

发表评论取消回复

表情：

评论列表（有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js按键修饰符及v-model修饰符

![9bf80c7e10d74e3d8ac3994208f9cba8.gif][] 目录一、按键修饰符（1）回车键按键修饰符示例（2）自定义按键修饰符示例二、

左手的ㄟ右手/ 2024年03月22日 10:49/ 0 赞/ 46 阅读

相关 Vue 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `Enter` 时调用

矫情吗；*/ 2022年12月22日 09:23/ 0 赞/ 180 阅读

相关 Vue 事件修饰符

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以在方法中轻松实

心已赠人/ 2022年12月22日 09:20/ 0 赞/ 223 阅读

相关 vue修饰符（事件修饰符，表单元素修饰符，按键修饰符）

注意修饰符可连缀事件修饰符 @事件名.修饰符=“” .prevent 拦截默认事件 .stop 拦截冒泡事件 .capture 改变事件执行顺序 .se

绝地灬酷狼/ 2022年11月29日 11:26/ 0 赞/ 209 阅读

相关 Vue修饰符（事件修饰符、按键修饰符...）

基本页面 1. 修饰符修饰符是由点开头的指令后缀来表示的 2. 下载vue.js并引入 3. 初始化vue实例 <!DOCTYPE html

秒速五厘米/ 2022年03月18日 08:38/ 0 赞/ 403 阅读

相关 vue 事件修饰符

> <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <m

朱雀/ 2022年02月21日 08:55/ 0 赞/ 316 阅读

相关 Vue教程10(按键修饰符)

本文我们来介绍下按键修饰符。 Vue按键修饰符 1.准备页面沿用前面案例的页面 ![在这里插入图片描述][watermark_type_ZmFuZ3p

Dear 丶/ 2021年12月05日 00:59/ 0 赞/ 241 阅读

相关 Vue学习之按键修饰符

Vue按键修饰符 1.准备页面沿用前面案例的页面 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

小灰灰/ 2021年11月30日 01:10/ 0 赞/ 335 阅读

相关 vue基础事件＼按键修饰符

事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropaga

灰太狼/ 2021年10月09日 03:32/ 0 赞/ 367 阅读

相关前端框架vue.js系列（4）：事件修饰符与按键修饰符

vue修饰符是指在触发事件或按键时额外的触发条件或回调。比如点击事件只允许触发一次，可以使用@click.once。原生事件对象 vue可以通过以下方式，获取原

怼烎@/ 2021年09月14日 06:20/ 0 赞/ 335 阅读