vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native

vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:

<input v-on:keyup.13="submit">

vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~

上面代码,还可以在这样写:

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

注意!!!如果用了封装组件的话,比如element,这个时候使用按键修饰符需要加上.native

比如:

<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search()"></el-input>

@click-native-prevent

1.在封装好的组件上使用,所以要加上.native才能click

2.prevent就相当于..event.preventDefault()

jQuery 事件 - preventDefault() 方法

preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。

所以@submit.native.prevent是用来阻止默认行为的。

keyup.enter.native&click.native.prevent的更多相关文章

  1. vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native

    vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:\ <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名, ...

  2. Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter

    1.绑定监听@click: (以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click ...

  3. vue 中 @click.native.prevent 事件

    在项目中看到@click.native.prevent, 查了一点资料 总结一下, 1.给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件, 2.prev ...

  4. vue 中给组建绑定原生事件@click.native=""

    <template>     <div class="div">  //组建使用          <v-header @click.native=& ...

  5. @click.native 会触发原生 click事件 vue

    @click.native 会触发原生 click事件 vue

  6. vue组件添加事件@click.native

    1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中:  子组件内部处理click事件然后向外发送click事件:$emit(&q ...

  7. 当使用vue的按键修饰符不起效果的时候怎么办?如@keyup.enter = '' ;

    这个问题困扰了我一个多小时,各种测bug !始终测不出来! 直接上代码(错误示范) <el-form-item prop="password"> <el-inpu ...

  8. ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案

    期望实现,输入数字后,回车直接执行点击按钮"转换" 无效写法: <el-input v-model="input" placeholder="请 ...

  9. element-ui 的input组件 @keyup.enter事件的添加办法

    <el-input placeholder="请输入密码" type="password" @keyup.enter.native="login ...

随机推荐

  1. 传输模型,网络层次划分,三次握手,四次挥手,IP与端口,套接字socket

    了解套接字之前,需要先了解基本的传输模型 其次,还需要了解网络的七层划分和四层结构 在python中,数据链路层相当于硬件层,python不需要了解,只用在传输层进行学习就足够了 其中,传输层分为TC ...

  2. 0316 【案例】MySQL count操作优化案例一则

      转自http://blog.itpub.net/22664653/viewspace-1791124/ 一 背景 某业务的数据库定期报 thread_runing 飙高,通定位发现一个慢查询sql ...

  3. UVA The Tower of Babylon

    The Tower of Babylon Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many det ...

  4. Javascript中数据实时推送

    数据变化后前端需要更新,有几种方式:(参考http://www.xiaocai.name/post/cf1f9_7b6507) .利用setInterval函数,每隔n秒去异步拉取数据.对数据实时性要 ...

  5. 基于ActiveMQ的消息中间件系统逻辑与物理架构设计具体解释

    1. 基本介绍与组件架构图 维基百科对消息中间件的定义是"Message-oriented Middleware is software infrastructure focused on ...

  6. fzu 1075 分解素因子

    代码: #include<cstdio> #include<cstring> #include<iostream> using namespace std; int ...

  7. DecimalFormat格式化输出带小数的数字类型

    刚開始 double d = 333333333.333333333; System.out.println(d); 输出结果为3.333333333333333E8 网上找到了DecimalForm ...

  8. 对VC++的OO思考

    1. MFC借助C++的优势为Windows开发开辟了一片新天地,同时也借助 ApplicationWizzard使开发者摆脱离了那些每次都必写基本代码2. 借助ClassWizard和消息映射使开发 ...

  9. ijkplayer详解AAA

    https://www.jianshu.com/p/c5d972ab0309 https://www.android-arsenal.com/details/1/530 https://stackov ...

  10. linux Redis 5.0集群搭建

    文档结构如下: Redis cluster 是redis的分布式解决方案,在3.0版本正式推出后,有效的解决了redis分布式方面的需求:当遇到单机内存,并发,流量等瓶颈是,可以采用cluster架构 ...