HTML部分：

<div class="web" id="vm">
　　<h1>網址導航</h1>
<div class="web-list">

<table>
　　<thead>
　　　　<tr>
　　　　　　<th width="25%">網站名稱</th>
　　　　　　<th>網址</th>
　　　　　　<th width="14%">好評度</th>
　　　　　　<th width="18%">操作</th>
　　　　</tr>
</thead>

<tbody id="tbody">
　　<tr v-for="(x,index) in http">
　　　　<td>{{ x.webname }}</td>
　　　　<td>{{ x.weburl }}</td>
　　　　<td>{{ x.good }}</td>
　　　　<td>
　　　　　　<input type="button" value="修改" v-on:click="amend()">
　　　　　　<input type="button" value="刪除" v-on:click="del(index)">
　　　　</td>
　　</tr>
</tbody>
</table>

</div>

<div class="web-form">

<table>
　　<tr>
　　　　<td>網站名稱：<input type="text" id="name" v-model="x.webname"></td>
　　　　<td>網址：<input type="text" v-model="x.weburl"></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="重填" id="reBtn"></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>

用Vue實現增刪功能