如何将Vue中el-input的按键修饰符绑定改写成长尾？

本文共计801个文字，预计阅读时间需要4分钟。

在Vue中，如何编写键盘事件监听器，允许将按键值作为装饰符使用，例如监控回车键事件，有以下两种写法：

1. 使用`@keyup.按键码`语法，如：

2. 使用`@keyup.enter`语法，如：

vue怎么写键盘事件

vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码：

<input type="text" @keyup.13="console.log($event)"></input>

<input type="text" @keyup.enter="console.log($event)"></input>

但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。

解决办法：加上.native原生事件修饰符即可。.native：监听组件根元素的原生事件，主要作用是给自定义的组件添加原生事件。