如何设置Vue中el-input组件的按键修饰符绑定键盘事件？

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

在Vue中编写键盘事件监听，可以使用两种方法：使用修饰符和监听原生事件。

使用修饰符Vue允许将按键值作为修饰符直接用在事件处理器中，如下所示：

监听原生事件也可以直接监听原生键盘事件，并通过事件对象来获取按键值：

然后在Vue组件的methods中定义处理函数：

javascriptmethods: { handleKeyup(event) { if (event.keyCode===13) { console.log(event); } }}

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标签属于自定义标签，因此触发不了键盘事件。