vue中v-model动态生成的实例详解
更新时间：2017年10月27日 11:02:47 作者：湖工电气
这篇文章主要介绍了vue中v-model动态生成的实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下
vue中v-model动态生成的实例详解
前言：
最近在做公司的项目中，有这么一个需求，每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的。那么问题来了，我们要怎样动态生成v-model？
现在项目做完了就整理了一下，直接贴代码了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div class="line" v-for="(item,index) in dataModel">
<input type="text" v-model="dataModel[index].value1" />
<span>{{dataModel[index].value1}}</span>
<button v-bind:data-index="index" v-on:click="submitClick">提交</button>
<input type="text" v-model="dataModel[index].value2" />
<span>{{dataModel[index].value2}}</span>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
// 创建一个空的数组
dataModel: []
},
created: function(){
// 这里是动态生成v-model,这个可以放在网络请求成功里面;
var len = 4;
for (var i = 0; i < len; i ++) {
var item = {value1: '',value2: ''};
this.dataModel.push(item);
}
},
methods: {
// 显示v-model里面的数据
submitClick: function(event){
var tag = event.target;
var index = tag.getAttribute('data-index');
alert(this.dataModel[index].value1);
}
}
})
</script>
</html>
效果图：
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
今天小编就为大家分享一篇vue2.0获取鼠标位置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue路由传参的基本实现方式,结合实例形式总结分析了vue.js路由传参的三种实现方式,包括params显示传参、不显示参数以及query显示参数传参,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了在vue项目如何使用base64加密，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
electron-vue 运行报错 Object.fromEntries is not a function
Object.fromEntries() 是 ECMAScript 2019 新增的一个静态方法，用于将键值对列表（如数组）转换为对象，如果在当前环境中不支持该方法，可以使用 polyfill 来提供类似功能，接下来通过本文介绍electron-vue 运行报错 Object.fromEntries is not a function的解决方案2023-05-05
vue鼠标hover(悬停)改变background-color移入变色问题
这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue中用props给data赋初始值遇到的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
这篇文章主要介绍了vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制，本文给大家介绍vue+openlayer实现地图聚合效果和撒点效果，感兴趣的朋友一起看看吧2021-09-09
vscode 配置vue+vetur+eslint+prettier自动格式化功能
这篇文章主要介绍了vscode 配置vue+vetur+eslint+prettier自动格式化功能，本文通过实例代码图文的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
使用Vue3-Ace-Editor如何在Vue3项目中集成代码编辑器
这篇文章主要介绍了使用Vue3-Ace-Editor如何在Vue3项目中集成代码编辑器,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论