004 - 动态添加的数据之v-model的使用

<div id="app">
  <ul>
    <li v-for="item in list">
      <input type="text" v-model="item.info.name"/>
      <p>{{item.info.name}}</p>
      
      <p>------------------------------------------------{{item.info.selected}}</p>  
      <select v-model="item.info.selected">  
        <option disabled value="">请选择</option>  
        <option>A</option>  
        <option>B</option>  
        <option>C</option>  
      </select>  
    </li>
  </ul>
  <button @click="add">add</button>
</div>

new Vue({
  el: '#app',
  data: {
    //列表
    list: []
  },
  methods: {
    //添加多条数据
    add() {  
      this.list.push(  
        {  
          id: 1,   
          info: {  
            name: 'kuoaho',  
            selected: 'A'  
          }  
        }  
      )  
    }  
  },
  //监听list数据变化
  watch: {
    list:{
      deep: true, //深度监听
      handler: function (newVal,oldVal) {
        console.log(1111)
      }
    }
  }
})

备注：测试网址=》  http://jsrun.net/L8qKp/edit