Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢
这里介绍两种,一种是v-for中循环生成的输入框,一种是在element-table中生成的输入框
在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2..
类似这样的,这样就可以通过绑定的值取到对应输入框的值了,
 
在控制台打印的结果:
还有一种场景是在表格中嵌套的input:
这样的只用绑定表格的属性就好了,这样在打印出来的tableData中就可以拿到input的值

Vue循环中多个input绑定指定v-model的更多相关文章

  1. vue中多个input绑定enter按键事件

    默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...

  2. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  3. 在循环中如何取input的值和增加点击事件

    {volist name="dianpu" id="dianpu"} <input style="border: none;" rea ...

  4. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  5. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  6. vue 如何在循环中绑定v-model

    vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...

  7. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  8. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  9. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

随机推荐

  1. static、静态变量、静态方法

    1 静态:static 1.1 用法 是一个修饰符:用于修饰成员(成员变量和成员函数) 1.2 好处 当成员变量被静态static修饰后,就多了一种调用方式,除了可以被对象调用外,还可以直接被类名调用 ...

  2. 生产者与消费者-N：N-基于list

    多个生产者/多个消费者: /** * 生产者 */ public class P { private MyStack stack; public P(MyStack stack) { this.sta ...

  3. U盘文件或目录损坏且无法读取怎么解决

    转自 http://jingyan.baidu.com/article/020278118afaec1bcc9ce5df.html U盘文件或目录损坏且无法读取怎么解决 听语音 | 浏览:37504 ...

  4. CMake 默认编译、链接选项

    查看cmake默认编译和链接的参数设置 CMakeLists.txt 文件内容: cmake_minimum_required(VERSION 3.2) message(STATUS "CM ...

  5. p3295 [SCOI2016]萌萌哒

    传送门 分析 我们可以将一个点拆成logN个点,分别代表从点i开始,长度为2^k的子串 那么当我们处理两个区间相等的关系时,对区间做二进制拆分,拆成log个区间,分别并起来即可 当然我们这样做修改是省 ...

  6. scala中的注解

    scala中很多注解实现java中关键字的用法 @volatile注解标记为易失的:@transient注解将字段标记为瞬态的:@strictfp注解对应strictfp修饰符:@native注解标记 ...

  7. img中 src 中文路径解决办法

    最近有个项目场景如下:需要后台遍历图片.视频所在的文件夹,获取的到的路径传递到JSP页面,使用<img src="具体的路径">显示图片.遇到的问题:如果图片的路径.图 ...

  8. Java分层概念(转)

    Java分层概念(转) 对于分层的概念,似乎之间简单的三层,多了,就有点难以区分了,所以收藏了这个. ervice是业务层 action层即作为控制器 DAO (Data Access Object) ...

  9. blkid找不到需要的uuid

    记录: blkid找不到需要的uuid,需要格式化后才有

  10. 移动端自适应个人理解与收集——rem

    rem——更好的适配移动端.这个单位我一直想弄个究竟,今天终于看了个差不多.看了很多的博客.心中总算有自己的想法.(还有vh,vw这里我这个小白还没有弄明白就先不写了.) 1.rem可以在html,b ...