Vue按键修饰符：@keyup.enter

陌一一

6545人浏览 · 2022-11-21 19:25:57

陌一一 · 2022-11-21 19:25:57 发布

事件keyup是按键抬起事件，就是当按键抬起触发；
keyup后面加上按键修饰符可以指定抬起某个按键再触发事件；
每一个按键都有一个keyCode，比如“Enter”回车键的keyCode就是13，普通字母的keyCode是ASCII值，
想知道是哪一个按键抬起，以前的做法是通过evt.keycode来判断；
现在用Vue的方法，可以直接通过按键修饰符，指定按键，就很方便；

<body>
    <div id="box">
        <input type="text" @keyup.enter="handleKeyup">
    </div>
    <script>
        new Vue({
            el:"#box",
            methods:{
                handleKeyup(evt){
                    console.log(evt.target.value)
                }
            }
        })
    </script>
</body>

使用方法：

（1）很多按键都可以绑定，而且可以组合在一起绑定：

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

含义是：按enter+ctrl才可以触发事件

（2）或者按照keyCode值来绑定：

<input type="text" @keyup.65="handleKeyup">

含义是：绑定“a”键，因为“a”的ASCII是65

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^