Vue 动态表单模板

    

Vue 动态表单模板

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Vue动态表单</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.2/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 = 3;
      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>

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

  Previous post Vue-watch 观察者代码
Next post   JS 递归优化

已有 2 条评论

  1. 你这个站的前端做的不错啊,打开速度也快

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://aiylqy.com
个性签名:毁掉一个人最好的方式就是放纵他的缺点。

  近期评论

青春就是用来追忆的,当你怀揣着它时,它一文不值,只有将它耗尽后,再回过头看,一切才有了意义,爱过我们的人和伤害过我们的人,都是我们青春存在的意义。

既然活着来到这个世界,就没有打算活着回去。所以,在这有限的时间里,我们应该珍惜生命,珍惜机会,更要珍惜那得之不易的时间。因那滴答做响的时间脚步,一旦走过,再不回头。

青春是一个充满魁力,充满诱惑的时代。好动是青春,好奇是青春,好玩是青春。玩世不恭更是青春,我们的一切切都是青春。

要先打败任何事情得先学会打败自己。

我会把每一次改变当做成长,哪怕是痛也值得。