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. phpcms 电脑手机合并

    电脑手机端 ========================== <script type="text/javascript"> function browserRed ...

  2. 洛谷 P3227 BZOJ 3144 [HNOI2013]切糕

    题目描述 经过千辛万苦小 A 得到了一块切糕,切糕的形状是长方体,小 A 打算拦腰将切糕切成两半分给小 B.出于美观考虑,小 A 希望切面能尽量光滑且和谐.于是她找到你,希望你能帮她找出最好的切割方案 ...

  3. HDU - 2923 - Einbahnstrasse

    题目: Einbahnstrasse Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  4. js 元素遍历

    2018-06-26 //百度首页测试 var i, len = 0, element = document.querySelector('#s_form_wrapper'), child = ele ...

  5. Solr部分更新MultiValued的Date日期字段时报错及解决方案:Invalid Date String:'Mon Sep 14 01:48:38 CST 2015'

    问题描述如标题. 异常信息如下: Result Caused by: org.apache.solr.common.SolrException: Invalid Date String:'Mon Se ...

  6. 0709关于mysql优化思路【何登成】

    转自 http://isky000.com/database/mysql-performance-tuning-sql 优化目标 减少 IO 次数IO永远是数据库最容易瓶颈的地方,这是由数据库的职责所 ...

  7. HDU 3389

    对于这道题,我们需要从(A+B)%3==0这式子考虑.对于第一条式子,我们可以知道,只能是奇偶盒子交替转移. 由第二条式子可知,要么是同余为0的A,B之间转移,要么是余数为1,2之间的 转移.后来仔细 ...

  8. 数据结构之---C语言实现广义表头尾链表存储表示

    //广义表的头尾链表存储表示 //杨鑫 #include <stdio.h> #include <malloc.h> #include <stdlib.h> #in ...

  9. android监听虚拟按键的显示与隐藏【转】

    本文转载自:http://blog.csdn.net/u014583590/article/details/55263141 虚拟按键在华为手机中大量存在,而虚拟按键的存在无疑增加了屏幕适配的难度,往 ...

  10. [Java] 总结1.5/1.6/1.7版本的特性

    开发过程中接触到了从jdk1.5---jdk1.7的使用,在不同的阶段,都使用过了jdk的一些新特性,操作起来更加方面啦!特此总结了下,以下是测试代码: JDK1.5新特性: 1.自动装箱与拆箱: I ...