vue用computed实现类似于商城搜索列表搜索排序

最近有个项目有一个类似于商城搜索列表，搜索出的列表数据可以根据关键词进行筛选，例如：输入框中输入 “男鞋” 关键词就会把数据中有男鞋的列表展现出来，其他的则不显示，还有几个筛选条件，比如：根据价格升序，价格降序，综合排序等等。大概的要求就是这样，这种要求在做类似商城搜索，订单，甚至后台管理项目中，也会用到列表筛选排序。因此这里写一份小demo,希望能帮助到大家！

1.大概的 demo 就是类属于这样。

数据列表是相当于请求拿到的数据，根据输入框的关键词，展现关联数据，可以用vue的computed和watch都能处理。computed会代码简单少点。

代码文章尾部统一贴出！！！

2.例如：我输入 “跑步鞋”，只会加载出标题有跑步鞋相关的数据。我这边会在input中使用 v-model="keyWord"3.按钮排序，选中排序的类型。
先定义一个类型数据，例如：sortType:0 在data数据中定义一个数据，根据 sortType 的值来过滤数据。
当我选中降序的时候，我会根据价格的降序去排列

类似于这种效果。

4.贴代码，因为我项目用了element -ui 所以，样式有饿了么的样式，无关紧要。css用了sass。

<template>
  <div class='welcome'>  
    <div>
      <h2>商城商品过滤</h2>
      <div>
        <el-input placeholder="请输搜索词" v-model="keyWord" clearable></el-input>
        <el-button type="primary" @click='sortType = 1'>价格升序</el-button>
        <el-button type="primary" @click='sortType = 2'>价格降序序</el-button>
        <el-button type="primary" @click='sortType = 0'>默认排序</el-button>
      </div>
      <ul>
        <li v-for='item in filterGoods' :key=item.id>
          {{item.title}} —— 单价： {{item.price}} —— 类型：{{item.type}}
        </li>
      </ul>
    </div>
   </div>
</template>

  .welcome{
    padding:20px;
    h2{
      text-align: center;
    }
    .el-input{
      width: 400px;
    }
    ul{
      margin-top: 20px;
      li{
        padding:10px;
        background-color: #fff;
      }
    }
  }

data () {
    return { 
      goods:[   //这个值相当于从服务器请求接口  '男鞋' 拿到的数据商品列表
        {id:'001',title:'2022款回力男鞋',price:99,type:'休闲鞋'},
        {id:'002',title:'2022款特步氢风科技男鞋跑步鞋',price:288,type:'跑步鞋'},
        {id:'003',title:'鸿星尔克男鞋国产',price:168,type:'休闲鞋'},
        {id:'004',title:'安踏运动男鞋篮球鞋',price:599,type:'篮球鞋'},
        {id:'005',title:'李宁休闲鞋男鞋网面透气鞋',price:389,type:'休闲鞋'},
        {id:'006',title:'2022款回力透气网面男鞋',price:89,type:'休闲鞋'},
        {id:'007',title:'2021款鸿星尔克透气网面男鞋跑步鞋',price:189,type:'运动鞋'},
        
      ],
      keyWord:'',   //输入框搜索的关键词
      sortType:0,  //0代表默认排序（原排序）  1代表价格升序  2代表价格降序
    },


  computed:{
    filterGoods(){  //这个  filterGoods  就是我们上面循环商品的数据列表，也是我们要计算的属性
      //使用 computed 一定要于返回值，但是因为需要多条件过滤，所以先用变量 filterArr 先储存，最后过滤完再返回
      const filterArr = this.goods.filter((item)=>{  //使用 filter 进行过滤，必须使用 return 的方式返回，注： filter不会改变原数组,它返回过滤后的新数组
        return item.title.indexOf(this.keyWord) !== -1;  //判断是否包含输入的关键词， -1代表没找着
      })
      //判断类型，再把数据做排序
      if(this.sortType){   
        filterArr.sort((price1,price2)=>{  //使用 sort 排序方法
          return this.sortType == 1?price1.price-price2.price:price2.price-price1.price
        })
      }
      return filterArr   //最后把排序好的数据return 回去
    }
  },

完事，代码其实不多，就computed 那点代码，就是注释写的废话了点！