最近有个项目有一个类似于商城搜索列表，搜索出的列表数据可以根据关键词进行筛选，例如：输入框中输入 “男鞋” 关键词就会把数据中有男鞋的列表展现出来，其他的则不显示，还有几个筛选条件，比如：根据价格升序，价格降序，综合排序等等 。大概的要求就是这样，这种要求在做类似商城搜索，订单，甚至后台管理项目中，也会用到列表筛选排序 。因此这里写一份小demo,希望能帮助到大家！
1.大概的 demo 就是类属于这样 。
【vue用computed实现类似于商城搜索列表搜索排序】数据列表是相当于请求拿到的数据，根据输入框的关键词，展现关联数据，可以用vue的和watch都能处理 。会代码简单少点 。
代码文章尾部统一贴出！！！
2.例如：我输入 “跑步鞋”，只会加载出标题有跑步鞋相关的数据 。我这边会在input中使用 v-model=""
3.按钮排序，选中排序的类型 。
先定义一个类型数据，例如：:0 在data数据中定义一个数据，根据的值来过滤数据 。
当我选中降序的时候，我会根据价格的降序去排列
文章插图
类似于这种效果 。
4.贴代码，因为我项目用了 -ui 所以，样式有饿了么的样式，无关紧要 。css用了sass 。
商城商品过滤价格升序 价格降序序 默认排序 - {{item.title}} —— 单价： {{item.price}} —— 类型：{{item.type}}
.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 回去}},
- 面试官：用了 TCP 协议，肯定不会丢包
- 超级变式BOM下单，VA01-CU51-CS62的搭配使用
- 用了TCP协议就一定不会丢包吗
- ORACLE 行专列 PIVOT 函数的应用
- 《巨人的陨落》用英文怎么说
- 投媒网 投媒网是做什么用的
- 虚拟机磁盘阵列 RAID0 RAID1 RAID5 RAID10 搭建演示使用R
- mysql主从复制及读写分离脚本-亲测可用
- 如何借用敏捷实现IT对数字化转型支持 | 2023佛山敏捷之旅成功举办
- 【Cache】Redis配置以及常用命令