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的图片懒加载js
Jun 30 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
javascript实现留言板功能
Feb 08 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
Yii框架form表单用法实例
2014/12/04 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python实现点对点聊天程序
2018/07/28 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Python定义函数实现累计求和操作
2020/05/03 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
专营店会计助理岗位职责
2013/11/29 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
双语教学实施方案
2014/03/23 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
讨论nginx location 顺序问题
2022/05/30 Servers