vue实现实例搜索和排序

搜索和排序的功能都是通过计算属性：
1、搜索的主要通过filter过滤出符合条件的数据并保存起来
2、对符合条件的数据进行升降的排序，使用sort排序

<template><div class="content"><!-- 头部 --><div class="header flex-row"><div class="inner flex-row"><span>价格排序</span><select v-model="sortStr"><option class="options" value="1">价格从高到低</option><option class="options" value="0">价格从低到高</option></select><div class="flex-1"></div><input type="text" placeholder="搜索内容" v-model="keyword" /><button>搜索</button></div></div><div class="flex"><ul><li class="flex-row" v-for="good in list" :key="good.id"><img src="../assets/img/shop.png" alt="" /><span class="title">{{ good.title }}</span><div class="flex-1"></div><div class="price">实付:<span>￥{{ good.price.toFixed(2) }}</span></div></li></ul></div></div>
</template><script>
export default {name: "Home",components: {},data() {return {// 搜索关键字keyword: "",// 排序顺序sortStr: "1",// 商品类别goodList: [{id: 1,title:"府品标面果吧啦些中的市对理吧时中件把吃车中时时就是一个商品标出啦啦时时的啦",price: 621,},{id: 2,title:"府品标面果吧啦些中的市对理吧时中件把吃车中时时就是一个商品标出啦啦时时的啦的民",price: 21.0,},{id: 3,title:"府品标面果吧啦些中的市对理吧时中件把吃车中时时就是一个商品标出啦啦时时的啦的民123",price: 123,},{id: 4,title:"花品标装毕理哈时华理吧时呼到吧时华中吧啦鲜甲巴啦就是一个商品标想时时前市时前前222",price: 21,},],// 结果resultList: [],};},created() {},watch: {keyword(newVal) {let arr = this.goodList;if (newVal.length == 0) {this.goodList = arr;}},},computed: {list() {// 1、拿到当前所有的数据const { keyword, sortStr, goodList } = this;// 2、根据搜索条件查询let arr = goodList.filter((item) => item.title.indexOf(keyword) !== -1);console.log(arr);// 3、拿到搜索后的数据，进行升/降排序if (sortStr === "1") {arr.sort((a, b) => b.price - a.price);} else {arr.sort((a, b) => a.price - b.price);}return arr;},},methods: {},
};
</script><style lang="less" scoped>
@import url("../assets/css/globle.css");
.flex-1 {flex: 1;
}
.flex-row {display: flex;
}
.flex-col {display: flex;flex-direction: column;
}
.content {width: 90%;margin: 0 auto;padding: 0 0 30px 0;box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
}
// 头部
.header {height: 174px;padding: 0 30px;justify-content: space-between;align-items: center;background-color: rgb(255, 245, 234);.inner {width: 100%;display: flex;select {margin-left: 15px;width: 167px;border: 1px solid #fff3e9;height: 40px;outline: none;appearance: none;-webkit-appearance: none;-moz-appearance: none;padding-left: 20px;.options {height: 46px !important;line-height: 46px;}}input {height: 34px;padding: 0 12px 0;outline: none;background: #fff;border: 1px solid #e2eefe;}button {width: 76px;height: 37px;background: #2988f9;padding: 0;color: #fff;border: none;border-radius: 2px;}}
}ul {width: 90%;box-sizing: border-box;border-radius: 30px;padding: 0 62px 10px;margin: 30px auto;background-color: #eff5fe;li {justify-content: flex-start;padding: 14px 0;border-bottom: 2px solid #d2d3d4;img {height: 80px;width: 80px;margin-right: 12px;}.title {color: #2d89f9;}.price {display: flex;align-items: flex-end;span {color: #ff4f00;}}}
}
</style>

1.搜索功能的实现是通过computed属性计算出新的数组，该数组通过filter对persons数组进行过滤得到。

array.filter(function(currentValue,index,arr), thisValue)

参数说明：
function(currentValue,index,arr)：必须。函数，数组中的每个元素都会执行这个函数；
currentValue：必须。当前元素的值；
index：可选。当前元素的索引值；
arr：可选。当前元素属于的数组对象；
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作“this”的值。

在本例中：

goodList.filter((item) => item.title.indexOf(keyword) !== -1);

注： =>相当于function(){return}

goodList.filter((item) =>{return item.title.indexOf(keyword) !== -1
});

2、通过v-model给select绑定值，根据绑定的值确定排序的顺序

  if (sortStr === "1") {// 降序arr.sort((a, b) => b.price - a.price);} else { // 升序arr.sort((a, b) => a.price - b.price);}

vue实现实例搜索和排序相关推荐

Vue列表搜索和排序---vue工作笔记0010
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 然后我们继续看看,列表搜索与排序. 先看看效果我们有一些数据然后我们输入o以后,包含o的被查询了 ...
实例检索︱图像的实例搜索（文献、方法描述、商业案例）
笔者在这几天看了一些关于图像特征化的内容,发现图像相似性搜索领域,一般先图像特征量化,然后进行相应的匹配. 1.方向一:描述符.先抽取图像局部特征符,根据一些匹配算法进行匹对,较多适合在图像比对,人脸 ...
Vue开发实例（17）之实现用户列表
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
Vue开发实例（09）之按钮的使用
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
elementUI table自定义表头弹框搜索，排序，显示tag标签
elementUI table自定义表头弹框搜索,排序,显示tag标签允许一种排序,多种搜索条件包括三种类别,添加了solt插槽,也可以自定义: 输入框[input] 多选[checkbox] 范 ...
阿里提出电商搜索全局排序方法，淘宝无线主搜GMV提升5%
作者 | 瑞溪编辑 | Vincent AI 前线导读:AI 前线本周带来第 35 篇论文解读,本期要解读的论文来自阿里巴巴,主题是:电商搜索全局排序方法.一个好的排序算法可以为电商带来销量的巨大提 ...
#研发解决方案介绍#基于ES的搜索+筛选+排序解决方案
郑昀基于胡耀华和王超的设计文档最后更新于2014/12/3 关键词:ElasticSearch.Lucene.solr.搜索.facet.高可用.可伸缩.mongodb.SearchHub.商品中 ...
go语言笔记——切片函数常见操作，增删改查和搜索、排序
7.6.6 搜索及排序切片和数组标准库提供了 sort 包来实现常见的搜索和排序操作.您可以使用 sort 包中的函数 func Ints(a []int) 来实现对 int 类型的切片排序.例如 ...
《LeetCode力扣练习》第33题搜索旋转排序数组 Java
<LeetCode力扣练习>第33题搜索旋转排序数组 Java 一.资源题目: 整数数组 nums 按升序排列,数组中的值互不相同 . 在传递给函数之前,nums 在预先未知的某个下 ...

vue实现实例搜索和排序

vue实现实例搜索和排序相关推荐

最新文章

热门文章