Vue按键修饰符：@keyup.enter

事件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按键修饰符：@keyup.enter相关推荐

Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
Vue.js：按键修饰符keyup,keyup.enter,keyup.alt.enter的使用
学习Vue.js第三天键盘事件keyup <label>你所在城市:</label><input type="text" v-on:keyup=&q ...
五、伊森商城前端基础-Vue v-on 事件修饰符按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
004_Vue按键修饰符
1. 按键修饰符keyup 1.1. .enter回车键 <input v-on:keyup.enter="handleSubmit" /> 1.2. 代码 <! ...
vue与elementUI中给el-input绑定键盘按键--按键修饰符
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="con ...
01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)
01- vue是什么: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
22. Vue keycodes按键修饰符
需求在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup事件,并且还要使用按键修饰符来指定按下的键盘按钮. 下面来看看另一个需求来逐步认识一下按钮 ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...

Vue按键修饰符：@keyup.enter

Vue按键修饰符：@keyup.enter相关推荐

最新文章

热门文章