数组操作
点击按钮实现排序功能
<div id="app">
<button @click="sortGoods">排序</button>
<ul>
<li v-for="good of goods">
{{good.name}}---{{good.price}}---{{good.count}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
goods:[
{
name:'ipone',
price:5000,
count:5
},
{
name:'华为',
price:3000,
count:8
},
{
name:'小米',
price:2000,
count:15
}
]
},
methods:{
sortGoods:function(){
this.goods = this.goods.sort(function(x,y){
return x.price-y.price
});
}
}
})
</script>
点击按钮实现筛选功能
<div id="app">
<button @click="filterGoods">筛选</button>
<ul>
<li v-for="(good,index) in goods">
名称:{{good.name}}---价格: {{good.price}}---数量: {{good.count}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
goods:[
{
name:'ipnone',
price:8000,
count:12
},
{
name:'华为',
price:5000,
count:5
},
{
name:'vivo',
price:3000,
count:20
},
{
name:'小米',
price:3000,
count:50
},
{
name:8848,
price:10000,
count:2
}
]
},
methods:{
filterGoods:function(){
this.goods = this.goods.filter(function(element){
if(element.price>5000){
return element;
}
})
}
}
})
</script>
点击按钮实现移除功能
<div id="app">
<ul>
<li v-for="(good,index) in goods" :key="good.name">
名称:{{good.name}}---价格: {{good.price}}---数量: {{good.count}}
<button @click="deleteGood(index)">移除</button>
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
goods:[
{
name:'ipnone',
price:8000,
count:12
},
{
name:'华为',
price:5000,
count:5
},
{
name:'vivo',
price:3000,
count:20
},
{
name:'小米',
price:3000,
count:50
},
{
name:8848,
price:10000,
count:2
}
]
},
methods:{
deleteGood:function(index){
this.goods.splice(index,1);
}
}
})
</script>