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>
转载于:https://www.cnblogs.com/JKMI/p/7851757.html
相关资源：vue实现表格增删改查效果的实例代码