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. Spring 第一天课程

    一. 面试题部分 1． 什么是IOC?什么是DI?他们有什么区别? 答案: IOC,即控制反转.是指将原来程序中自己创建实现类对象的控制权反转到IOC容器中. IOC的别名:依赖注入(DI),DI 是 ...

  2. linux鸟哥的私房菜

    这书还是感觉非常棒,真的是授之以渔而不是授之以鱼.我觉得只需要掌握一个命令就可以了man -k KEYWORD 比如我想查找和防火墙相关的命令,那么 man -k firewall 结果是ufw 然后 ...

  3. poj3734 Blocks

    传送门 题目大意 有n个方块,有1,2,3,4四种颜色对其进行染色,求1,2颜色的方块个数均为偶数的方案数对10007取模的值. 分析 我们假设1表示这个颜色个数是奇数,0表示是偶数,所以对于所有状态 ...

  4. SDKD 2017 Summer Single Training #03

    今天的题目有 6 个. 第一题: CodeForces - 400D  Dima and Bacteria 这个题实际是不难的,难的可能在题意的理解上还有题干有点长,这个题很考察题意上面,知识点很熟悉 ...

  5. CodeForces 404D Minesweeper 1D (DP)

    题意:给定一个序列,*表示雷,1表示它旁边有一个雷,2表示它旁边有两个雷,0表示旁边没有雷,?表示未知,求有多少情况. 析:dp[i][j] 表示第 i 个放 j 状态,有多少种情况,然后很简单的DP ...

  6. Redis实现用户关注功能

    最近项目要涉及到粉丝关注问题,权衡再三还是使用Redis实现比较方便,使用Redis的有序集合可以做到根据关注的时间有序的取出列表,假设我的ID是me,别人的ID是other. 1. 添加关注 添加关 ...

  7. 内存不足导致的java.lang.OutOfMemoryError: java heap space引出java工程启动参数设置

    今天做分类实验,生成了190m的kernel文件,在读到svm中的时候跳出了java.lang.OutOfMemoryError: java heap space异常.随便搜了一下,发现与eclips ...

  8. SQL Server 附加数据库 错误5210

    前言 那天在弄机房的时候,附加数据库总是附加不上,然而将附加数据库文件放到优盘里,就可以附加成功.我也不知道为什么了,但是这次还是别将就了.于是乎,上网查了查原来是权限不够啊.这可怎么办,见下面三种方 ...

  9. Apache虚拟主机-解惑篇

        有很多平时喜欢钻研的童鞋会发现,为什么有时候自己访问某XXse网站时,总是更新IP地址,内容却与以前一样.这个时候就要了解虚拟主机的概念了.了解这个概念,能够帮助运维同学,更内涵的隐藏自己的主 ...

  10. phaser小游戏框架学习（一）

    这两天由于项目的需要,所以简单学了一下phaser框架. 官网:http://phaser.io/ 还有一个phaser小站,是中文的网站,但是内容不如英文文档全,大家也可以去看这个网站,需要查阅AP ...