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 ...
随机推荐
- UVA10382-Watering Grass-贪心 NYOJ6-喷水装置(一)-贪心
10382 - Watering Grass Time limit: 3.000 seconds n sprinklers are installed in a horizontal strip of ...
- NEFU_117素数个数的位数
题目传送门:点击打开链接 Problem : 117 Time Limit : 1000ms Memory Limit : 65536K description 小明是一个聪明的孩子,对数论有着很浓烈 ...
- 搭建vue开发环境的步骤
相信很多人在刚开始学习vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前在学习angular的时候搭建过一次,过了一个月后在搭建第二次的时候,竟然有一些混乱,所以今天想 ...
- ES5.0集群搭建
最近在网上看到很多ES集群的搭建方法,本人在这人使用Elasticsearch5.0.1版本,介绍如何搭建es集群并安装head插件和其他插件安装方法. 一.搭建环境(2台Centos7系统服务器) ...
- vuex的使用及持久化state的方式
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 当我们接触vuex的时候,这是我们最先看到 ...
- c++(快速排序)
快速排序是编程中经常使用到的一种排序方法.可是很多朋友对快速排序有畏难情绪,认为快速排序使用到了递归,是一种非常复杂的程序,其实未必如此.只要我们使用好了方法,就可以自己实现快速排序. 首先,我们复习 ...
- tinyxml的封装与使用(转载)
tinyxml是个高效精简的xml解析开源代码. 针对tinyxml直接使用对于对xml不是很熟悉的入门新手来说,有些概念难以理解,因此我将其封装后,供大家使用. 头文件: #include &quo ...
- [国嵌攻略][149][Yaffs2文件系统应用]
嵌入式系统自启动 MTD技术通过把Nand FLash划分成bootloader分区,Linux kernel分区和file system分区来达到自启动的效果. 配置和编译内核 1.配置Linux内 ...
- [国嵌攻略][045-046][一跃进入C大门]
[一跃进入C大门] 跳转方式 1.相对跳转:b或bl指令,通过计算两个地址之间的差值来给pc赋值相对跳转 2.绝对跳转:ldr指令,通过给pc直接赋值,完成绝对跳转 代码编写 1.在汇编代码中直接使用 ...
- 织梦dedeCMS留言薄
dedeCMS留言薄模塊名爲guestbook, 留言薄模板:/templets/plus/guestbook.htm; 留言回覆模板: 管理員回覆調用/templets/plus/guestbook ...