vue动态添加元素

vue动态添加元素先使用v-for定义,动态推入一组数据。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>

  <div id="form">
    <input v-for="item in items" v-model="item.value">
    <button @click="addItem">add</button> {{items}}
  </div>

<div id="layout">
  <form id="form1" action="#">
    <div>
      <div v-for="e in ele">
          <input class="a" v-model="e.a">
          <input class="b"  v-model="e.b">
      </div>
    </div>
    <button @click="clone">addBtn</button>
  </form>
</div>
  <script type="text/javascript">
    new Vue({
      el: '#form',
      data: {
        items: []
      },
      methods: {
        addItem:function() {
          this.items.push({
            value: ''
          });
        }
      }
    });
  </script>
  <script type="text/javascript">
    new Vue({
      el:'#form1',
      data:{
        ele:[]
      },
      methods:{
        clone:function(){
          this.ele.push({a:'',b:''});
        }
      }

  });
  </script>
  </body>
</html>

vue