Vue事件处理 - 按键修饰符

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue事件处理 - 按键修饰符

目录

按键修饰符

常见修饰符

绑定按键事件

绑定事件

优化回车修饰符

多个按键

直接绑定数字

总结

---

按键修饰符

常见修饰符

.esc .up .down .left .right . space .ctrl .shift .delete

绑定按键事件

在一个输入框上绑定一个按键触发事件。

示例如下：

<input type="text" @keyup="handleKeyUp">

绑定事件

对在按键上的绑定的函数创建处理事件。

示例如下：

handleKeyUp(evt) {
    console.log("keyup", evt.keyCode)
    if (evt.keyCode === 13) { // 判断回车
        console.log('key up add', evt.target.value)
    }
}

效果如下：

优化回车修饰符

原有按键事件，所有按键都会触发；使用enter回车修饰符后，只有回车才会触发。

示例如下：

<input type="text" @keyup.enter="handleKeyUp">

多个按键

如果想绑定多个按键事件可以使用点连接。

示例如下：

<input type="text" @keyup.enter.ctrl="handleKeyUp">

直接绑定数字

如果常用键值不够用，可以直接绑定数字。

示例如下：

<input type="text" @keyup.13="handleKeyUp">

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue事件处理 - 按键修饰符