vue计算属性实现过滤+排序
vue计算属性实现排序过滤
·
上代码!!!
export default {
components: { Nav },
props: {},
data() {
return {
filterIndex: 2, //0代表原本顺序,1代表降序,2代表升序
searchName: "", //搜索名字
list: [
//过滤前的数组
{ name: "one", age: "18" },
{ name: "two", age: "16" },
{ name: "three", age: "19" },
{ name: "four", age: "17" },
],
};
},
computed: {},
computed: {
filterList() {
//监听filterList是否发生改变
const { searchName, list, filterIndex } = this;
let newFilterList; //定义一个最新的数组
newFilterList = list.filter((v) => { //过滤后返回给 newFilterList
return v.name.indexOf(searchName) != -1; //过滤条件
});
if (filterIndex != 0) {//不是原本顺序
newFilterList.sort((v1, v2) => {
if (filterIndex == 1) {
return v1.age - v2.age; //降序
}
else {
return v2.age - v1.age; //升序
}
});
}
return newFilterList; //返回newFilterList给监听的属性
},
},
methods: {
setAgeIndex(index){ //排序状态赋值
this.filterIndex=index
},
},
watch: {},
// 页面周期函数--监听页面加载
onLoad(options) {},
// 页面周期函数--监听页面初次渲染完成
onReady() {},
// 页面周期函数--监听页面显示(not-nvue)
onShow() {},
// 页面周期函数--监听页面隐藏
onHide() {},
// 页面周期函数--监听页面卸载
onUnload() {},
};
以上代码实现
更多推荐
已为社区贡献1条内容
所有评论(0)