用Vue实现增删功能

HTML部分：

<div class="web" >操作</th>
　　　　</tr>
</thead>

<tbody >
　　　　</td>
　　</tr>
</tbody>
</table>

</div>

<div class="web-form">

<table>
　　<tr>
　　　　<td>网站名称：<input type="text" ></td>
　　　　<td>好评度：

　　　　　　<select name="" v-model="x.good">
　　　　　　　　<option value="">请选择</option>
　　　　　　　　<option value="★">★</option>
　　　　　　　　<option value="★★">★★</option>
　　　　　　　　<option value="★★★">★★★</option>
　　　　　　　　<option value="★★★★">★★★★</option>
　　　　　　　　<option value="★★★★★">★★★★★</option>
　　　　　　</select>

　　　　</td>
　　　　<td width="18%"><input type="button" value="新增" v-on:click="addBook()"><input type="button" value="重填" ></td>
　　</tr>
</table>

</div>

</div>

vue.js部分：

<script>
var vm = new Vue({
　　el:'#vm',
　　data:{
　　　　x:{webname:'',weburl:'',good:''},
　　　　http:[
　　　　　　{webname:'京东',weburl:'http//www.jd.com',good:'★★★★'},
　　　　　　{webname:'淘宝',weburl:'http//www.taobao.com',good:'★★★★'}
　　　　],
},
　　　methods:{
　　　　// 新增
　　　　　　addBook: function() {
　　　　　　　　this.http.push(this.x);
　　　　　　　　this.x = {};
　　　　},
　　　　//刪除
　　　　　　del: function (index) {
　　　　　　　　alert("你确定要删除吗？");
　　　　　　　　this.http.splice(index, 1);
　　　　　　}
　　}
})

</script>