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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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闭包(Closure)使用详解
2013/05/02 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
深入理解ES6中let和闭包
2018/02/22 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python实现的knn算法示例
2018/06/14 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
浅析python中的del用法
2020/09/02 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
捐款倡议书范文
2014/02/02 职场文书
授权委托书样本
2014/04/03 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技