Vue排序功能
先看效果图:HTML部分<div><el-button @click="toggleSort('money', false)" type="primary">从小到大</el-button><el-button @click="toggleSort('money', true)" type="primary">从...
·
先看效果图:
HTML部分
<div>
<el-button @click="toggleSort('money', false)" type="primary">从小到大</el-button>
<el-button @click="toggleSort('money', true)" type="primary">从大到小</el-button>
<div v-for="item in testpage2"></div>
<div v-for="item in sortList">{{ item.num }}</div>
</div>
通过toggleSort点击事件并传递参数来控制排序
JS部分
export default {
data(){
return{
sortList:[{num:'5'},{num:'88'},{num:'43'},{num:'56'},{num:'28'},{num:'61'},{num:'9'}],
d_sort:'', //默认不排序
newSort:false,//默认小大到大排列
}
},
computed:{
//排序
testpage2: function(){
var _this = this;
var arrByZM = []; //声明新的数组用来存储排序的数据
if(_this.d_sort != ''){
_this.sortList.sort(function( a , b){
if(_this.newSort){
return b.num - a.num;
}else{
return a.num - b.num;
}
});
}
//返回排序后的数据
return arrByZM;
},
},
methods:{
//排序
toggleSort(d_sort,newSort){
this.d_sort = d_sort;
this.newSort = newSort;
},
}
}
通过computed计算属性来监听排序的变化,并返回最新的排序数组
至此排序完成,以上是完整的排序方法
更多推荐
已为社区贡献42条内容
所有评论(0)