Vue循环中多个input绑定指定v-model实例


Posted in Javascript onAugust 31, 2020

Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢

这里介绍两种:

一种是v-for中循环生成的输入框,

一种是在element-table中生成的输入框

在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2..

类似这样的,这样就可以通过绑定的值取到对应输入框的值了,

Vue循环中多个input绑定指定v-model实例

在控制台打印的结果:

Vue循环中多个input绑定指定v-model实例

还有一种场景是在表格中嵌套的input:

Vue循环中多个input绑定指定v-model实例

这样的只用绑定表格的属性就好了,这样在打印出来的tableData中就可以拿到input的值

Vue循环中多个input绑定指定v-model实例

补充知识:Vue.js 关于v-for动态绑定v-model,并实时获取input输入值和索引

如何动态绑定V-model

今天在尝试绑定的时候出来很多问题,而找了很多博客,描述的比较乱。

于是记录一下我的解决方法

动态绑定V-model

<el-form>
 <el-form-item v-for="(item,index) in form" :key="index" :label="item.title">
 <el-input v-model="item.modelName" @input.native="change($event,index)" :placeholder="item.placeholder"></el-input>
 </el-form-item>
</el-form>
data() {
 return {
 form: [
 {
 title: "用户名",
 placeholder: "输入用户名",
 modelName:'h'
 },
 {
 title: "密码",
 placeholder: "输入密码",
 modelName:'2'
 },
 {
 title: "确认密码",
 placeholder: "再次输入密码",
 modelName:'3'
 }]
 };
 }

其实v-for动态绑定model和绑定其他元素没有大多差别,只要一点需要注意一下,正常动态绑定需要在属性前加:(v-on)这个语法糖,唯独绑定v-model时不用添加,在写的时候也是纠结了半天,至于原因我还没有查找,希望有评论大神指出。

获得键盘实时输入的值和input输入框的索引

输入值实时获取

<el-input v-model="item.modelName" @input.native="change($event,index)" :placeholder="item.placeholder"></el-input>

通过@input.native来监听输入框实时输入的值,注意:需要添加.native后缀。

VUE官网有相应解释(链接)

获得索引

methods: {
 change: function(e,index) {
 console.log(e.target.value);//实时获取输入值
 console.log(index);//获取点击输入框的索引
 }
 }

以上这篇Vue循环中多个input绑定指定v-model实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 #Javascript
vue中v-model对select的绑定操作
Aug 31 #Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 #Javascript
vue绑定数字类型 value为数字的实例
Aug 31 #Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 #Javascript
详解Node.JS模块 process
Aug 31 #Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 #Javascript
You might like
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
详解php用static方法的原因
2018/09/12 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
switch语句的妙用(必看篇)
2016/10/03 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
python opencv 图像拼接的实现方法
2019/06/27 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python新手学习raise用法
2020/06/03 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
Python wordcloud库安装方法总结
2020/12/31 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
小学教师节活动方案
2014/01/31 职场文书
班干部演讲稿
2014/04/24 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
亮剑观后感500字
2015/06/05 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript