Write a case
A new function is added on the basis of list filtering, which can install specified conditions for ascending or descending order (top-down)
Here is a supplement, the mouse is far away in a row, and then press alt+shift+↓ to copy a row, which is the same as ctrl+d in IDEA
view page
For the convenience of implementation, define different digital meanings for three different button clicks. The original order is 0, the descending order is 1, and the ascending order is 2. This variable can be defined, and then different values are passed in according to the click event of each button. parameter
Then modify the logic of filtering, don't return it first, and return it after sorting and filtering according to age
js When it comes to sorting, you have to mention the sort function, here is a brief introduction to the use of sort
A simple description of sort sorting
The sort function has two parameters (max, min). If you need ascending order, use max-min. If you need descending order, use min-max. You need to use return to return the sorted array. The sorted array will overwrite the original one. array
to sort
descending order
Now that you know how to use sort, you can improve the code logic. You can’t directly use the parameter itself, but the age attribute in the object to sort
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初始vue</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType=2">年龄升序</button>
<button @click="sortType=1">年龄降序</button>
<button @click="sortType=0">原顺序</button>
<ul>
<li v-for="(person,index) of filPersons" :key="index">
{
{person.name}}-{
{person.age}}-{
{person.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
const vm= new Vue({
el:'#root',
data:{
// 输入框输入的内容 由于一开始肯定是空的，所以初始化为空
keyWord:'',
sortType:'0', //0原顺序，1降序，2升序
persons:[
{id:'001',name:'马冬梅',age:'18',sex:'女'},
{id:'002',name:'周冬雨',age:'9',sex:'女'},
{id:'003',name:'周杰伦',age:'31',sex:'男'},
{id:'004',name:'温兆伦',age:'56',sex:'男'}
],
},
computed:{
filPersons(){
const arr= this.filPersons= this.persons.filter((p)=>{
//name里面是否包含输入框输入的内容 使用indexOf判断是否包含
return p.name.indexOf(this.keyWord)!==-1
})
// 判断是否需要排序 这样的判读sortType只能是1或者2,0是进不来的
if(this.sortType){
arr.sort((a,b)=>{
return this.sortType===1?b.age-a.age:a.age-b.age
})
}
//返回最终排序好的数组
return arr
}
}
})
</script>
</html>
View the page after the code is written
ascending order
descending order
original order
