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. 快速上手Linux 玩转典型应用_慕课网笔记

    1.没有exe安装程序 2.区分大小写 3.一切皆文件 4.文件后缀不是那么重要,只是为了好识别 -------------------------------------------------- ...

  2. POJ 1061 BZOJ 1477 Luogu P1516 青蛙的约会 (扩展欧几里得算法)

    手动博客搬家: 本文发表于20180226 23:35:26, 原地址https://blog.csdn.net/suncongbo/article/details/79382991 题目链接: (p ...

  3. LCS,LIS,LCIS

    网站:CSUST 8月3日(LCS,LIS,LCIS) LCS:      以下讲解来自:http://blog.csdn.net/yysdsyl/article/details/4226630 [问 ...

  4. eclipse实现批量修改文件的编码方式

    http://blog.csdn.net/haorengoodman/article/details/38493007 在eclipse+MyEclipse环境下,打开一个jsp文件,经常发现汉字无法 ...

  5. asp.net--OnAuthorization方法

    我看别人可以通过这个方法中的 Context.Request.Headers.Authorization对象来调取对象来使用,可是我通过实验尝试不出来,真不知道为什么,这儿留个坑吧 别人的 我的

  6. Ningx初学

    原文地址 1. 到官网下载Ningx 2. 启动 2.1双击nginx.exe图标,可见黑窗口一闪而过,启动完毕. 2.2 命令行到nginx目录,输入nginx启动.(注,此方式命令行窗口无任何提示 ...

  7. vue-自定义组件传

    项目中,我们经常会遇到自定义组件传值的问题,方法很多种,但是原理很简单,下述文档总结实际项目中使用的传值方式. 父组件传递给子组件某一值,子组件内会修改该值,然后父组件需要获取新值 ​ 在 Vue 中 ...

  8. 【LeetCode OJ 136】Single Number

    题目链接:https://leetcode.com/problems/single-number/ 题目:Given an array of integers, every element appea ...

  9. Odoo(OpenERP)开发实践:数据模型学习

    作者:苏州-微尘 Odoo中,在Python类里定义的模型及字段信息,可在系统中直接查看.为用户开启技术特性权限后,就可以通过菜单 [设置->技术->数据结构->模型] 进入列表视图 ...

  10. findContours 轮廓查找

    物体的轮廓勾勒出了物体的整体形状,物体形状的边界像素一起组合成了轮廓. 灰度图像边界的明显特征是边界两侧灰度级的突变,根据这个特征,使用Sobel.拉普拉斯或Canny之类的边缘检测算子可以有效的检测 ...