今天研究vue 跟着 教程 做了一个小demo。实现表格的 增删内容

如果添加 一条信息 点击提交 会在表格添加一行。

如果点击删除的话就会删除点击的那一行，要实现这个功能 就要得到点击的tr的 index 。根据老教程是这样的

/*************html******

<tr v-for="message in messages">
<td>{{message.name}}</td>
<td>{{message.age}}</td>
<td>{{message.sex}}</td>
<td><button v-on:click = "deleteData($index)">删除</button></td>
</tr>

/*************js*****

deleteData:function(index){
this.messages.splice(index,1);
}

js部分是没有问题的，主要是传入的参数 index 出现错误

主要原因是因为  vue2.0 移除了$index $key ，所以 引用index 要采用以下的方式：

***************************

<tr v-for="(message,index) in messages">
<td>{{message.name}}</td>
<td>{{message.age}}</td>
<td>{{message.sex}}</td>
<td><button v-on:click = "deleteData(index)">删除</button></td>
</tr>

github 地址 ： https://github.com/mawuyun/vue/blob/master/vue/html/testVueOne.html