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 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python读取oracle函数返回值
2016/07/18 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
律师催款函范文
2015/06/24 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL