动态生成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>