vue中v-model动态生成的实例详解

时间：2021-05-26

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>

效果图：

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章