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
个性签名:毁掉一个人最好的方式就是放纵他的缺点。

  近期评论

成功源于不懈的努力。

暗自伤心,不如立即行动。

再多一点努力,就多一点成功。

得意淡然,失意坦然;喜而不狂,忧而不伤。

海纳百川,有容乃大;壁立千仞,无欲则刚。