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验证工具类搜集整理
Jan 16 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
js实现双色球效果
Aug 02 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解析字符串里所有URL地址的方法
2015/04/03 PHP
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
简单介绍Python中的RSS处理
2015/04/13 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
员工晚婚的请假条
2014/02/08 职场文书
后勤主管岗位职责
2014/03/01 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
军训口号
2014/06/13 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
初一英语教学反思
2016/02/15 职场文书