用Vue实现增删功能

标签：eth   class   mode   名称   www   rip   var   img   logs   

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实现增删功能

标签：eth   class   mode   名称   www   rip   var   img   logs   

原文地址：http://www.cnblogs.com/JKMI/p/7851757.html