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

最新推荐文章于 2022-02-27 23:05:22 发布

gaog2zh

最新推荐文章于 2022-02-27 23:05:22 发布

阅读量210

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/gaogzhen/article/details/107475984

版权

vue 专栏收录该内容

42 篇文章 8 订阅

订阅专栏

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

文章目录

1、按键修饰符
2、自定义按键修饰符
3、案例-简单计算器
- ***后记*** ：

内容

1、按键修饰符

格式：

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

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

keyup	keyCode	描述
enter	13	回车
tab	9	制表符
esc	27	退出
space	32	空格
up	38	方向键：上
down	40	方向键：下
left	37	方向键：左
right	39	方向键：右

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

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-模板语法-按键修饰符与自定义按键修饰符

vue-模板语法-按键修饰符与自定义按键修饰符目录文章目录1、按键修饰符2、自定义按键修饰符3、案例-简单计算器***后记*** ：内容1、按键修饰符格式： <标签 @keyup.别名="事件处理"></标签>按键修饰符：vue为最常用的按键提供别名keyupkeyCode描述enter13回车tab9制表符esc27退出space32空格up38方向键：上down4
复制链接

扫一扫