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 相关文章推荐
jquery实现预览提交的表单代码分享
May 21 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
浅析 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 socke 向指定页面提交数据
2008/07/23 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
js更优雅的兼容
2010/08/12 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
javascript中 try catch用法
2015/08/16 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
大整数数相乘的问题
2012/07/22 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
导游的职业规划书范文
2013/12/27 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
五年级英语教学反思
2014/01/31 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python