VUE学习笔记-列表搜索,排序

一、列表搜索

1.列表过滤

要求：在输入输入字符，显示含有该字符的信息。

列表过滤是通过计算来显示过滤结果的。

页面内容：
<input type="text"v-model="searchName">
    <ul>
        <li v-for="(p, index) in filterPerson" :key="index">
            {
    
    {
    
    index}}--{
    
    {
    
    p.name}}--{
    
    {
    
    p.age}}
        </li>
    </ul>

 const vm=new Vue({
    
    
          el:"#app",
          data:{
    
    
            orderType:0,//0表示正常顺序，1表示升序，2表示降序
            searchName:'',//查找的值
            person:[
                  {
    
    name:'Jack',age:18},
                  {
    
    name:'Bob',age:19},
                  {
    
    name:'lisa',age:20},
                  {
    
    name:'rose',age:21}
              ]
          },
          computed:{
    
    
              //计算最终搜索的值
            filterPerson(){
    
    
              //取出相关的数据
               const {
    
    searchName,person,orderType} =this;//解构重组
              //定义最终需要显示的数组
              let ePerson;
              //对person进行过滤
              ePerson=person.filter(p=>p.name.indexOf(searchName)!==-1);
              
              return ePerson;
            }
          }
      })

ePerson=person.filter(p=>p.name.indexOf(searchName)!==-1);

indexOf的返回值不等于-1表示已经查找到该字符的情况

p=>p.name.indexOf(searchName)!==-1是一个箭头函数
//相当于：
function fun(p){
    
    
         return p.name.indexOf(searchName)!==-1;
              }
ePerson=person.filter(fun);

2.列表排序

 <div>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>

排序使用sort(x)方法，x必须是一个函数。

//在搜索时就进行按年龄排序
            if(orderType!==0){
    
    
                ePerson.sort(function(p1,p2){
    
    //p1-p2表示升序，p2-p1表示降序
                    if(orderType===1){
    
    
                        return p1.age-p2.age;//升序
                    }else{
    
    
                        return p2.age-p1.age;//降序
                    }
                })
            }

 methods: {
    
    
            setOrderType(orderType){
    
    
               this.orderType=orderType;//把按钮的orderType赋值给this的orderTy
            }
          },