创建站点的步骤,有哪些网站是拐角型,软文经典案例,沈阳网站建设找哪家vue怎么写键盘事件
vue允许将按键值作为修饰符来使用#xff0c;如监听回车事件#xff0c;有两种写法#xff0c;如下代码#xff1a;
input typetext keyup.13console.log($event)/inputinput typetext keyup…vue怎么写键盘事件
vue允许将按键值作为修饰符来使用如监听回车事件有两种写法如下代码
input typetext keyup.13console.log($event)/inputinput typetext keyup.enterconsole.log($event)/input但要注意的是 当我们在在el-input采用如上两种写法时他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件所以el标签属于自定义标签因此触发不了键盘事件。 解决办法 加上.native原生事件修饰符即可。.native监听组件根元素的原生事件主要作用是给自定义的组件添加原生事件。 vue与elementUI中给el-input绑定键盘按键代码如下
el-input placeholder店铺名称 clearable v-modelqueryObj.shopname keyup.enter.nativequerytemplate slotprepend店铺名称/template
/el-input常用按键修饰符
别名修饰符键值修饰符对应按键.delete.8/.46回格/删除.tab.9制表.enter.13回车.esc.27退出.space.32空格.left.37左.up.38上.right.39右.down.40下
鼠标按键修饰符
别名修饰符可用版本对应按键.left2.2.0以上左键.right2.2.0以上右键.middle2.2.0以上中键
系统按键修饰符
别名修饰符可用版本对应按键.ctrl2.1.0以上Ctrl键.alt2.1.0以上Alt键.shift2.1.0以上Shift键.meta2.1.0以上meta键Windows系统上为田键
关于组合修饰符的使用 vue为我们提供了组合修饰符的机制但是它的使用必须配合系统按键修饰符才可以生效。如下是一段测试代码
!DOCTYPE html
html
headtitle/title
/head
body
div idappbutton click.ctrlctrlClick clicktogether带上ctrl来找我玩呀/button
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.min.js/script
script typetext/javascriptlet vm new Vue({el: #app,methods: {together(event) {if (!event.ctrlKey) {console.log(------------- 我是可爱的分割线呀 -------------)console.log($event.ctrlKey:, event.ctrlKey)} else {console.log(欢迎呀)}},ctrlClick(event) {console.log(------------- 我是可爱的分割线呀 -------------)console.log($event.ctrlKey:, event.ctrlKey)console.log(Ctrl你来了呀)}}})
/script
/body
/html
