11.Vue按键修饰符

最新推荐文章于 2023-04-29 14:54:18 发布

高新园养鸡场

最新推荐文章于 2023-04-29 14:54:18 发布

阅读量102

点赞数

分类专栏： Vue 2.0 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/zyc3545/article/details/108209819

版权

Vue 2.0 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。
Vue 提供的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

局部按键修饰符

	<body>
		<div id="content">
			<input type="text" v-on:keyup.enter="cEnter"/>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#content",
			methods:{
				cEnter(){
					console.log("点击回车");
				}
			}
		});
	</script>

在input中按一下回车，控制台打印“点击回车”。

如果要对小键盘1响应，测试以下代码：

<input type="text" v-on:keyup.1="cEnter"/

并无效果，显然这样操作Vue无法识别某些按键。

全局按键修饰符

可以通过全局 config.keyCodes 对象自定义按键修饰符别名，形如Vue.config.keyCodes.别名 = 键盘码：

//html
<input type="text" v-on:keyup.nnn1="cEnter"/>

//vue
Vue.config.keyCodes.nnn1 = 97

这下按一下小键盘1，控制台打印“点击回车”。

高新园养鸡场

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.Vue按键修饰符

按键修饰符在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。Vue 提供的按键码的别名：.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right局部按键修饰符 <body> <div id="content"> <input type="text" v-on:keyup.enter="cEnter"/> &lt
复制链接

扫一扫