VUE之数组操作练习

排序案例

案例（排序）：点击按钮实现排序功能

<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);
			}
		}
	}

})