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. [转载]/etc/security/limits.conf解释及应用

    limits.conf的格式如下: username|@groupname type resource limit username|@groupname:设置需要被限制的用户名,组名前面加@和用户名 ...

  2. Windows Live Writer 使用指南

    一.简介 Windows Live Writer 是一个强大的离线博客编辑工具,通过它可以离线编辑内容丰富的博文,除了自身强大的编辑功能之外,还提供了接口,让其它开发人员通过插件提供工具自身没有提供的 ...

  3. emr问题处理

    --通过his病历号查询emr中对应的患者ID --通过患者ID找出患者所有的病历集合ID --通过病历集合查找患者所有的病历 --通过病历dataID查找对应的病历数据,病历存在大字段中 '; -- ...

  4. HDU 2102 A计划 (BFS或DFS)

    题意:中文题. 析:是一个简单的搜索,BFS 和 DFS都可行, 主要是这个题有一个坑点,那就是如果有一层是#,另一个层是#或者*,都是过不去的,就可以直接跳过, 剩下的就是一个简单的搜索,只不过是两 ...

  5. PCANet: A Simple Deep Learning Baseline for Image Classification?--名词解释

    1 上采样与下采样 缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个: 使得图像符合显示区域的大小 生成对应图像的缩略图 下采样原理:对于一幅图像I尺 ...

  6. C 语言 clock() 函数，例：计算多项式值

    C 语言 clock() 函数,例:计算多项式值 /** * clock(): 捕捉从程序开始运行到 clock() 被调用时所耗费的时间. * 这个时间单位是 clock tick, 即" ...

  7. day01.2-计算机网络协议

    注:本文摘自林海峰老师的博客,作为个人学习笔记,日后方便阅读,原文详见链接www.cnblogs.com/linhaifeng/articles/5937962.html 一.  ISO协议     ...

  8. 深入解读Job system（2）

    https://mp.weixin.qq.com/s/vV4kqorvMtddjrrjmOxQKg 上一篇文章中,我们讲解了Job System的基础知识,本文将以网格变形项目为示例,讲解Job Sy ...

  9. [SinGuLaRiTy] NOIP膜你赛-Day 1

    [SinGuLRiTy-1022] Copyright (c) SinGuLaRITy 2017. All Rights Reserved.  对于所有题目:Time Limit:1s || Memo ...

  10. 洛谷P4074 [WC2013]糖果公园（莫队）

    传送门 总算会树形莫队了…… 上次听说树形莫队是给树分块,实在看不懂.然后用括号序列的方法做总算能弄明白了 先说一下什么是括号序列,就是在$dfs$的时候,进入的时候记录一下,出去的时候也记录一下 拿 ...