vue中多个input绑定enter按键事件
默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件
let handleEnter = (obj, handle) => {
if(!obj){
return;
}
if (!obj.$options) {
return;
}
//因为使用的是iView的组件 所以判断绑定的是Input 和 handleEnter
//如果使用默认的input 则是判断 INPUT 和 keyup
if (obj.$options._componentTag == "Input") {
obj.handleEnter = handle;
return;
}
//如果使用默认的input 这里遍历的是obj.$el.children
if (obj.$children.length == 0) {
return;
}
obj.$children.map(item => {
handleEnter(item, handle);
})
}
这里需要区分的是组件或者是input标签 因为我只使用了组件Input所以没有区分 如果使用的是input则是跟普通DOM一样遍历 后面不做赘述
vue中多个input绑定enter按键事件的更多相关文章
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- Vue循环中多个input绑定指定v-model
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种,一种是v-for中循环生成 ...
- Vue中自动获取input焦点
<input v-focus type="text" name="search" ref="input" autofocus v-mo ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- vue中html模板使用绑定的全局函数
我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- vue中时间控件绑定多个输入框
首先去下载laydate时间控件,引入到相应的模板中 <input type="text" val-required="" value="&qu ...
随机推荐
- Gym101473A Gym101473E Gym101473F-前缀和
代码: #include<iostream> #include<cstring> #include<cstdio> #include<cmath> #i ...
- js代码性能优化的几个方法
相信写代码对于大部分人都不难,但想写出高性能的代码就需要一定的技术积累啦,下面是一些优化JavaScript代码性能的常见方法. 一.注意作用域 1.避免全局查找 使用全局变量和函数肯定要比局部的开销 ...
- oracle设置自动增长序列
我们在用MS SQL Server时,可以为表的主键设置为自动加1的效果;但是在Oracle当中,我们是无法直接设置一个字段为自动加1,需要先建立一个Sequence,然后为这个表创建一个Trigge ...
- 算法-java代码实现堆排序
堆排序 第7节 堆排序练习题 对于一个int数组,请编写一个堆排序算法,对数组元素排序. 给定一个int数组A及数组的大小n,请返回排序后的数组. 测试样例: [1,2,3,5,2,3],6 [1,2 ...
- win7、win10进程pid4占用80端口的解决办法
https://jingyan.baidu.com/article/7e4409533ffe092fc1e2ef10.html 今天想用wamp架设服务器,但是程序启动不起来,查看系统端口,80端口被 ...
- PHP flock() 函数
定义和用法 flock() 函数锁定或释放文件. 若成功,则返回 true.若失败,则返回 false. 语法 flock(file,lock,block) 参数 描述 file 必需.规定要锁定或释 ...
- Uva 12171 Sculpture - 离散化 + floodfill
题目连接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- 微调数据库表结构,30 分钟搞定 WordPress 数据库查询缓慢问题
同事的美女图片站,基于 WordPress 搭建的,因为数据越来越多,变得慢,我从 PHP slow log 里面看出是 WordPress 有些查询总是很慢,即使已经安装了页面缓存插件,但是由于页面 ...
- MYSQL Nested Join Optimization
table_factor的语法和标准sql比较,后者只接受table_reference,每个逗号项都等于一个inner Join,e.g. SELECT * FROM t1 LEFT JOIN (t ...
- Oracle创建、管理撤销表空间
撤销管理模式: 用户通过设定撤销管理模式(undo mode)就可以灵活地选择使用手动撤销管理(manual undo management)或自动撤销管理(automatic undo manage ...