上一篇文章中，我們介紹了vue的列表過濾：vue(vue.js)—列表過濾 – 每天進步一點點 (longkui.site)
這篇文章簡單介紹一下，列表排序，這個一般是后端返回的jso直接排好序，當然，前端頁面也有可能用到的操作。
先上效果圖：
實現代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="請輸入關鍵詞" v-model="keyWord">
<button @click="type=1">年齡升序</button>
<button @click="type=2">年齡降序</button>
<button @click="type=0">原順序</button>
<div>
<li v-for="i in list2">
{{i.name}} --{{i.sex}}--{{i.age}}
</li>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
type:0, //0表示不排序，1表示升序，2表示降序
keyWord: "",
list: [
{ "name": "張三1", "sex": "男", "age": 12 },
{ "name": "李四", "sex": "女", "age": 31 },
{ "name": "張三2", "sex": "男", "age": 43 },
{ "name": "王五", "sex": "男", "age": 13 },
{ "name": "五六", "sex": "男", "age": 13 }
],
},
// 計算屬性
computed:{
list2(){
const arr =this.list.filter((i) => {
return i.name.indexOf(this.keyWord) != -1
})
//上面篩選，這里判斷一下是否需要排序
if(this.type){ //不是0的時候需要排序
//拿到過濾完的數據排序
arr.sort((a,b)=>{
return this.type===1?a.age-b.age:b.age-a.age
})
}
//最后返回arr
return arr
}
}
})
</script>
</body>
</html>
主要是應用了計算屬性和sort排序。通過type來控制順序還是逆序。