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 相关文章推荐
js调用后台servlet方法实例
Jun 09 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
微信小程序canvas动态时钟
Oct 22 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使用wordwrap格式化文本段落的方法
2015/03/17 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
开启PHP的伪静态模式
2015/12/31 PHP
jQuery 动画基础教程
2008/12/25 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
JS实现导航栏楼层特效
2020/01/01 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python 连接sqlite及简单操作
2017/06/30 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python 导入数据及作图的实现
2019/12/03 Python
Python实现括号匹配方法详解
2020/02/10 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
办理居住证介绍信
2014/01/15 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
南京导游词
2015/02/03 职场文书
实习指导老师意见
2015/06/04 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技