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. webform 内置对象（页面间传值）

    QueryString/URL传值  页面名后面加?变量名=值 有点:不占服务器内存. 缺点:保密性差:传递字符串长度有限. Response   --相应请求对象 Response.Redirect ...

  2. nginx关闭php报错页面显示

    默认情况下nginx是会显示php的报错的,如果要关闭报错显示,需要在/usr/local/php7/etc/php-fpm.d/www.conf文件里面设置,貌似默认情况下在php.ini关闭没效果 ...

  3. Bootstrap 的 Tooltip 和 Popover

    简介 Tooltip 指提示框,Popover 指弹出框. Tooltip 默认 Tooltip 功能是关闭的,使用前要手动开启. $(function () { $('[data-toggle=&q ...

  4. epoll聊天室的实现

    1.服务端 a. 支持多个用户接入,实现聊天室的基本功能 b. 使用epoll机制实现并发,增加效率 2. 客户端 a. 支持用户输入聊天消息 b. 显示其他用户输入的信息 c. 使用fork创建两个 ...

  5. Spring 特点

    IoC:豆浆和打针的例子.一个是主动的,一个是被动的.比如在spring里面我们需要对象了,提出需求,spring容器会把对象给你.(这就是IoC) AOP:

  6. Servlet对象生命周期(四)

    一.Servlet对象生命周期 一下图片说明上图第7点 destroy()方法是在停止tomcat服务器时执行 https://pan.baidu.com/s/1mgTabWW#list/path=% ...

  7. dojo1.7 加载器

    原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/modules/ dojo现在支持在异步模块异步(AMD)定义中加入模块写入功能了,这使 ...

  8. c#链接postgresql

    1.首先需要添加2个dll文件:Mono.Security.dll; Npgsql.dll. 2.配置文件增加 <appSettings> <!--<add key=" ...

  9. Algorithms - Insertion sort

    印象 图1 插入排序过程 思想 插入排序(Insertion Sort)的主要思想是不断地将待排序的元素插入到有序序列中,是有序序列不断地扩大,直至所有元素都被插入到有序序列中. 分析 时间复杂度: ...

  10. Xamarin.Forms(一) 学习笔记

    Xamarin.Forms是Xamarin跨平台开发app的跨平台的一个Framework,要使用这套Framework,要从XAML说起. XAML是同通过xml的方式来描述控件和动作,可以通过编译 ...