排序案例
案例(排序):点击按钮实现排序功能
<div id="app" v-cloak>
<button @click="sortGoods">排序</button>
<button @click="filterGoods">筛选</button>
<table>
<tbody>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>操作</th>
</tr>
<tr v-for="good in goods">
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>
<button @click="deletGoods">移除</button>
</td>
</tr>
</tbody>
</table>
</div>
//css样式
[v-cloak]{
display: none;
}
table{
border: solid 1px #000000;
width: 400px;
height: auto;
border-collapse: collapse;
}
table tbody th{
border: solid 1px #000000;
}
table tbody td{
border: solid 1px #000000;
text-align: center;
}
//js样式
new Vue({
el:"#app",
data:{
goods:[
{name:'iphone',price:20000},
{name:'vivo',price:3000},
{name:'华为',price:9600},
{name:'三星',price:2000},
{name:'诺基亚',price:600}
]
},
methods:{
sortGoods(){
this.goods.sort(function(a,b){
return a.price-b.price
})
},
filterGoods(){
this.goods= this.goods.filter(function(item,index,self){
return item.price>5000;
})
},
deletGoods(good){
if(confirm('您确定删除此商品?')){
var index=this.goods.indexOf(good);
this.goods.splice(index,1);
}
}
}
})