当前位置：首页 > 资讯 > 技术文档

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

时间：2021-11-23 15:59 编辑：来源：阅读：
扫一扫，手机访问

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

[b]vue中v-model动态生成的实例详解[/b] [b]前言：[/b] 最近在做公司的项目中，有这么一个需求，每一行有一个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>

效果图： [img]http://files.jb51.net/file_images/article/201710/20171027110051454.gif?201792711111[/img] 如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

全部评论(0)

上一篇：利用vue组件自定义v-model实现一个Tab组件方法示例
下一篇：浅谈vue,angular,react数据双向绑定原理分析

资讯排行榜
更多>>