动态生成input并绑定v-model

引言：在我们编写代码的时候，往往会出现例如动态增加input输入框等等动态操作，在vue项目中，如果动态增加input并且绑定v-model，并实现互不影响，则需要深拷贝，如果直接push的话是为浅拷贝，所有动态生成的input绑定的v-model地址值都指向同一个地址，就导致输入一个input，其余的input都会变化

<div id='app'>   
    <input type='text' v-model='item.val'  v-for='(item, index) in list' :key='index'>
    <button @click='sureFn'>增加</button>
</div>

<script>
    const vm = new Vue({
       el: '#app',
       data: {
           list: []
       },
       methods: {
           sureFn () {
              let params = {val: null, data:null}
              for (let i = 0, j = 10, i < j, j++) {
                  this.list.push(Object.assign({}, params))
              }
           }
       }
    })
</script>

另一种写法，直接push对象， 只要实现地址值不一样就可以

<div id='app'>   
    <input type='text' v-model='item.val'  v-for='(item, index) in list' :key='index'>
    <button @click='sureFn'>增加</button>
</div>

<script>
    const vm = new Vue({
       el: '#app',
       data: {
           list: []
       },
       methods: {
           sureFn () {
              for (let i = 0, j = 10, i < j, j++) {
                  this.list.push({val: null, data:null})
              }
           }
       }
    })
</script>