VUE JS 使用组件实现双向绑定的示例代码

<tr v-for="(item, index) in person.items">
<td >
<input-text :input="item" pname="school"></input-text>
</td>
<td >
<input-text :input="item" pname="year"></input-text>
</td>
<td >
<a @click="removeRow('items',index)" >删除</a>
</td>
</tr>

</table>
{{person}}
</div>
</script>

<inputtext :input="item" pname="school"></inputtext>
<inputtext :input="person" pname="name"></inputtext>

组件使用代码，这里绑定了 item,person 数据，pname 为绑定字段。

JS实现代码：

var app8 = new Vue({
     template:"#myTemplate",
     data:{
       person:{name:"",age:0,
        items:[]       }
     }
     ,
     methods: {
       addRow: function (name) {
        this.person[name].push({school:"",year:""})
       },
       removeRow:function(name,i){
         this.person[name].splice(i,1) ;
       }
      }
    })
    app8.$mount('#app8')

这里我们实现了 子表的数据添加和删除。

界面效果：