動態生成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>