vue-模板语法-按键修饰符与自定义按键修饰符

最新推荐文章于 2022-02-25 14:02:02 发布
最新推荐文章于 2022-02-25 14:02:02 发布
阅读量232 收藏 1
点赞数
分类专栏： # vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaogzhen/article/details/107475984
版权
vue-模板语法-按键修饰符与自定义按键修饰符
目录

文章目录



内容

1、按键修饰符

  • 格式：

      <标签 @keyup.别名="事件处理"></标签>

  • 按键修饰符 ：vue为最常用的按键提供别名

keyupkeyCode描述
enter13回车
tab9制表符
esc27退出
space32空格
up38方向键：上
down40方向键：下
left37方向键：左
right39方向键：右

2、自定义按键修饰符

  vue给常用的按键提供了别名，其他的按键需要自定义。

  • 格式：

      Vue.config.keyCodes.别名 = 码值
    • 码值：对应键盘键的ASCII码值

  • 示例：

      Vue.config.keyCodes.f1 = 112

3、案例-简单计算器

  • 暂时不对输入内容做校验：必须为数字，除数不能为0，结果保留多少位。

  • 需求：点击‘=’或者输入第二个数字按回车键计算并显示结果

  • 代码3-1：

      <!DOCTYPE html>
  <html lang="en">

  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>v-model</title>
  </head>

  <body>
  	<div id="app" v-cloak>
  		简易计算器<br>
  		<input type="text" v-model="n1" @focus="n1=''" >
  		<select v-model="opt">
  			<option value="+" selected />+
  			<option value="-" />-
  			<option value="*" />*
  			<option value="/" />/
  		</select>
  		<input type="text" v-model="n2" @focus="n2=''" @keyup.enter="calculate">
  		<button @click="calculate">=</button>
  		<input type="text" v-model="ret" disabled>
  	</div>
  	<script src="../../asserts/js/vue.js"></script>
  	<script>
  		let app = new Vue({
  			el: '#app',
  			data: {
  				n1: '0',
  				n2: '0',
  				ret: '0',
  				opt: '+'
  			},
  			methods: {
  				calculate() {
  					let o1 = parseInt(this.n1.trim())
  					let o2 = parseInt(this.n2.trim())
  					switch (this.opt) {
  						case '+':
  							this.ret = o1 + o2
  							break;
  						case '-':
  							this.ret = o1 - o2
  							break;
  						case '*':
  							this.ret = o1 * o2
  							break;
  						case '/':
  							this.ret = o1 / o2
  							break;

  						default:
  							break;
  					}
  				}
  			},
  		})
  	</script>
  </body>

  </html>

后记 ：

  本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
gaog2zh
关注
专栏目录
Vue中自定义按键修饰符
weixin_45147894的博客
04-13 358
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-on:keyup='handle' v-model='info'> </div&...
vue事件修饰符和按键修饰符用法总结
08-29
Vue 事件修饰符和按键修饰符用法总结 本篇文章主要介绍了 Vue 事件修饰符和按键修饰符的用法总结，旨在帮助开发者更好地理解和使用这些修饰符，以提高开发效率和代码质量。 一、事件修饰符 事件修饰符是 Vue.js ...
自定义全局按键修饰符
weixin_34366546的博客
05-20 156
对于上面没有的键，例如：F2 ，可以通过其 keyword = 113 ，来处理： 还可以通过定义113的别名，来处理： 转载于:https://www.cnblogs.com/JAVA-STUDYER/p/10892646.html...
Vue自定义按键修饰符
qq_42430908的博客
12-09 464
文章目录1. vue提供的按键码2. 其他按键码3. 自定义全局按键修饰符 1. vue提供的按键码 .enter .tab .delete .esc .space .up .down .left .right 示例代码： <input type="text" class="form-control" v-model="name" @keyup.enter="add()"> 2. 其他按键码 keyCode 8 = BackSpace BackSpace keyCode 9 = Tab T
Vue学习日记之自定义按键修饰符
qq_124917348的博客
06-05 497
1、Vue中的按键修饰符 在Vue中存在着修饰符，而按键修饰符又是其中的一种，在Vue的官方文档中有9种按键修饰符。 .enter----回车按下 .tab----tab键按下 .delete(捕获“删除”和“退格”键) .esc-----ESC键按下 .space---空格键按下 .up------上 .down----下 .left----左 .right---右 举个例...
vue中el-input绑定键盘按键(按键修饰符)
10-15
当需要对el-input绑定键盘事件时，尤其是使用键盘修饰符来监听特定按键的触发，就涉及到了Vue的键盘事件绑定规则。Vue允许开发者将键盘按键作为修饰符来使用，比如监听回车键的事件，有两种写法： ```html <!-- ...
Vue 按键修饰符处理事件的方法
08-27
如果这些别名不能满足需要，可以通过全局 config.keyCodes 对象自定义按键修饰符别名，例如 `Vue.config.keyCodes.x = 88`。 系统修饰键是指控键、alt 键、shift 键、meta 键等，它们可以与按键组合使用，触发特定...
Vue基础教程--自定义按键修饰符和指令（四）
u011581852的博客
03-21 502
Vue基础教程--自定义按键修饰符和指令（四）1 按键修饰符2 系统修饰键3 自定义按键修饰符4 鼠标按钮修饰符5 按键修饰符5.1 全局自定义指令5.2 局部指令5.3 钩子函数5.3.1 钩子函数参数5.4 动态指令参数5.5 函数简写5.5 标准案例 1 按键修饰符 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 2 系统修饰键 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 .c
键盘修饰符&自定义键盘修饰符
Sunshine的博客
02-25 429
键盘修饰符2.x中的键盘修饰符 2.x中的键盘修饰符 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 可以直接写成 @keyup.enter="方法名称" 现在可以直接调用的按键方法名称 .enter .tab .delete (捕获“删除”和“退格”键) .es
Vue之模板语法(下)
chenkang_ck的博客
08-22 220
1. 样式绑定 1.1 class绑定 使用方式：v-bind:class=“expression” expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style=“expression” expression的类型：字符串、数组、对象 2. 事件处理器 事件监听可以使用v-on 指令 之前已学习 2.1 事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰...
Vue的单选按钮语法
wgq18586361686的博客
11-06 164
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="in1"> <input value="男" type=.
10.v-on:keyup自定义按键修饰符
code_dream_wq的博客
11-26 278
自定义按键修饰符别名 - 在Vue中可以通过`config.keyCodes`自定义按键修饰符别名 <div id="app"> 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 <input type="text" v-on:keydown.f5="prompt()"> </div> <script> Vue.config.keyCodes.f5 = 116;
Vue-自定义按键修饰符
qq_44822110的博客
03-23 125
自定义按键修饰符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D...
前端学习（1192）:自定义按键事件修饰符
歌谣的博客
05-19 220
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
Vue.js（五）——自定义按键修饰符
爱写博客的小菜鸟的博客
10-28 349
自定义按键修饰符 按键修饰符 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 <input v-on:keyup.page-down="onPa
Vue系列教程（二十一）自定义按键修饰符
Hit the keyboard hard
02-28 291
给文本框添加按键修饰符的方法入下： <input type="text" class="form-control" v-model="name" @keyup.enter="add"> 点击enter会自动调用add()方法 全部的按键别名： .enter .tab .delete .esc .space .up .down .left .right 自定义按键别名： 自定义全局...
vue-模板语法-事件绑定与事件修饰符
gaogzhen的博客
07-20 353
vue-模板语法-事件绑定与事件修饰符 目录 文章目录1、事件绑定1.1、v-on1.2、事件处理1.3、参数传递2、事件修饰符***后记*** ： 内容 1、事件绑定   事件绑定指令，v-on，简写’@’。 1.1、v-on 格式： <标签 v-on.事件="事件处理"></标签> <标签 @事件="事件处理"></标签> // 简写 1.2、事件处理 简单事件处理逻辑：直接把逻辑写在事件处理位置 复杂事件处理：把事件处理封装
前端学习（1193）:简单计算器
歌谣的博客
05-19 213
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
Vue事件绑定揭秘：v-on机制与修饰符详解
在实际开发过程中，v-on与事件修饰符的结合使用，使得Vue.js的事件处理既灵活又强大。举例来说，假设有一个需求是阻止图片的默认点击行为（默认点击图片会跳转到图片地址），同时阻止事件冒泡，避免点击图片影响到其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值