期望实现,输入数字后,回车直接执行点击按钮“转换”

无效写法:

<el-input v-model="input" placeholder="请在此输入待转换的数值" v-on:keyup.enter="convert">

解决办法,加上.native

<el-input v-model="input" placeholder="请在此输入待转换的数值" v-on:keyup.enter.native="convert">

原因说明:

v-on 监听原生事件

现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件,可以使用 .native 修饰符,比如:

<my-component v-on:click.native="doSomething"></my-component>

文档跳转

ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案的更多相关文章

  1. 为input标签绑定事件的几种方式

    为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...

  2. 如何给a标签绑定ajax事件

    <a href="review?action=delete&id=${review.id}&articleId=${review.articleId}"cla ...

  3. 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具

    很久以来,在写Html和JS时,经常会给超链接<a>标签,绑定JS事件. 我们经常看到这样的写法,<a href="javascript:;" onclick=& ...

  4. element-ui <el-input> 注册keyup事件,即键盘enter.

    <template> <!-- 需求:keyup事件一般用在input中,在input框中输入内容,用户点击键盘的enter,执行搜索 --> <div class=&q ...

  5. 给js创建的一个input数组绑定click事件

    <html> <body> <input type="button" name="input[]" value="按钮1 ...

  6. <span> <div> 局部 keydown ,keyup事件。页面部分div $(document) 无效,可能焦点,添加焦点。

    前天改一个bug, js 实现的一个 面板拖拉,左右各两个列表,中间面板画线连接,页面左侧列表选中后,key 事件无效.右侧选中确有效,很奇怪,查看源码,左侧选中后,$(document).on(&q ...

  7. input标签的accept属性、JQuery绑定keyDown事件

    一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file&qu ...

  8. 如何用input标签上传多个图片并回显

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...

  9. 记录JavaScript中使用keyup事件做输入验证(附event.keyCode表)

    input的blur事件 $("#input-name").blur(function () { var value = $(this).val(); if (value === ...

随机推荐

  1. web前端问题整理

    1.常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1)浏览器:IE,Chrome,FireFox,Safari,Opera (Q2)内核:Trident,Gecko,Prest ...

  2. django 从零开始 9 自定义密码验证加密

    先上想法,想对数据库账号的密码进行一个加密,但是django文档中的加密方法set_password貌似是只针对他们默认的user模型 或者继承 AbstractBaseUser的模型有效 from ...

  3. RocketMQ-2.RocketMQ的负载均衡

    目录 RocketMQ的负载均衡 producer对MessageQueue的负载均衡 producer负载均衡 系统计算路由MessageQueue 自定义路由MessageQueue Consum ...

  4. css 固比固模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Day1T3小w的魔术扑克——图论

    为什么不搞\(T2\)??? 因为我太菜了,那题我是真的搞不出来 题目描述 链接:https://ac.nowcoder.com/acm/contest/1100/C 来源:牛客网 小\(w\)喜欢打 ...

  6. git命令,github网站以及sourceTree用法详解

    1.git下载安装 这里只是windows安装方法: 进入这个网址:http://msysgit.github.com/,点击下载,就会下载下来一个exe文件,双击打开,安装即可 完成安装之后,就可以 ...

  7. Altium Designer 20下载与安装教程

    目录 一.Altium Designer 20下载 二.Altium Designer 20安装 三.Altium Designer 20破解 四.Altium Designer 20汉化 作者:st ...

  8. RabbitMQ消息发布和消费的确认机制

    前言 新公司项目使用的消息队列是RabbitMQ,之前其实没有在实际项目上用过RabbitMQ,所以对它的了解都谈不上入门.趁着周末休息的时间也猛补习了一波,写了两个窗体应用,一个消息发布端和消息消费 ...

  9. Nacos作为微服务注册中心,爱不释手的感觉

    我觉得Nacos用起来还不错 在使用SpringCloud做分布式微服务架构时,注册中心是必不可少的一个组件.目前可以用的主要有:Eureka.Consul.Zookeeper.今天,我们就来说一下A ...

  10. Selenium系列(三) - 针对元素常见的简单操作

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...