vue实现多条件筛选超简洁代码
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
纯vue实现数据筛选逻辑功能,不依赖任何第三方插件、组件,复制粘贴开箱即用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 | < template > < div id = "app" > < div class = "container" > < div class = "CationBox" > < div class = "row" > < div class = "name" >平台:</ div > < div class = "content" > < div v-for = "(item,index) in PlatformList" :key = "index" @ click = "PlatformVar=item" :class = "['item',PlatformVar==item?'actvCss':'']" >{{item}}</ div > </ div > </ div > < div class = "row" > < div class = "name" >类型:</ div > < div class = "content" > < div v-for = "(item,index) in TypeList" :key = "index" @ click = "TypeVar=item" :class = "['item',TypeVar==item?'actvCss':'']" >{{item}}</ div > </ div > </ div > < div class = "row" > < div class = "name" >成色:</ div > < div class = "content" > < div v-for = "(item,index) in ConditionList" :key = "index" @ click = "ConditionVar=item" :class = "['item',ConditionVar==item?'actvCss':'']" >{{item}}</ div > </ div > </ div > </ div > <!-- 商品展示 --> < div class = "ContentBox" > < div class = "DataListBox" v-if = "ComDataList.length" > < div class = "item" v-for = "(item,index) in ComDataList" :key = "index" > < div >{{item.Platform}}</ div > < div >{{item.Title}}</ div > < div >{{item.Condition}}</ div > </ div > </ div > < div v-else class = "nullCss" >暂无相关商品~</ div > </ div > </ div > </ div > </ template > < script > export default { data() { return { PlatformVar:"全部", // 表示当前选中的平台 TypeVar:"全部", // 表示当前选中的类型 ConditionVar:"全部", // 表示当前选中的成色 PlatformList:["全部","淘宝","天猫","京东","闲鱼","转转"], // 平台 TypeList:["全部","CPU","显卡","内存条","硬盘"], // 类型 ConditionList:["全部","全新","打折","二手","停售"], // 成色 DataList:[ // 模拟接口返回的数据结构 {id:1,Title:"i9 13900k",Platform:"淘宝",Type:"CPU",Condition:"全新"}, {id:2,Title:"i9 9900ks",Platform:"闲鱼",Type:"CPU",Condition:"停售"}, {id:3,Title:"i9 11900k",Platform:"天猫",Type:"CPU",Condition:"全新"}, {id:4,Title:"i5 13600k",Platform:"转转",Type:"CPU",Condition:"停售"}, {id:5,Title:"i5 10400f",Platform:"京东",Type:"CPU",Condition:"全新"}, {id:6,Title:"i5 10400f",Platform:"淘宝",Type:"CPU",Condition:"二手"}, {id:7,Title:"i3 12100f",Platform:"闲鱼",Type:"CPU",Condition:"打折"}, {id:8,Title:"i3 10105f",Platform:"淘宝",Type:"CPU",Condition:"二手"}, {id:9,Title:"i3 10100f",Platform:"京东",Type:"CPU",Condition:"全新"}, {id:10,Title:"Rtx 2060",Platform:"闲鱼",Type:"显卡",Condition:"二手"}, {id:11,Title:"Rtx 2070",Platform:"转转",Type:"显卡",Condition:"二手"}, {id:12,Title:"Rtx 2080",Platform:"淘宝",Type:"显卡",Condition:"打折"}, {id:13,Title:"Gtx 1060",Platform:"淘宝",Type:"显卡",Condition:"全新"}, {id:14,Title:"Gtx 1070",Platform:"闲鱼",Type:"显卡",Condition:"二手"}, {id:15,Title:"Gtx 1080",Platform:"京东",Type:"显卡",Condition:"全新"}, {id:16,Title:"Rtx 3060",Platform:"淘宝",Type:"显卡",Condition:"全新"}, {id:17,Title:"Rtx 3070",Platform:"淘宝",Type:"显卡",Condition:"全新"}, {id:18,Title:"Rtx 3090",Platform:"京东",Type:"显卡",Condition:"全新"}, {id:19,Title:"爱国者 ddr4 2666",Platform:"京东",Type:"内存条",Condition:"全新"}, {id:20,Title:"爱国者 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"}, {id:21,Title:"爱国者 ddr4 3200",Platform:"淘宝",Type:"内存条",Condition:"打折"}, {id:22,Title:"英睿达 ddr4 2666",Platform:"淘宝",Type:"内存条",Condition:"停售"}, {id:23,Title:"英睿达 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"}, {id:24,Title:"英睿达 ddr4 3200",Platform:"天猫",Type:"内存条",Condition:"全新"}, {id:25,Title:"金士顿 ddr4 2666",Platform:"淘宝",Type:"内存条",Condition:"停售"}, {id:26,Title:"金士顿 ddr4 3000",Platform:"闲鱼",Type:"内存条",Condition:"二手"}, {id:27,Title:"金士顿 ddr4 3200",Platform:"淘宝",Type:"内存条",Condition:"打折"}, {id:28,Title:"三星 512Gb",Platform:"天猫",Type:"硬盘",Condition:"全新"}, {id:29,Title:"三星 256Gb",Platform:"闲鱼",Type:"硬盘",Condition:"二手"}, {id:30,Title:"三星 128Gb",Platform:"淘宝",Type:"硬盘",Condition:"打折"}, {id:31,Title:"七彩虹 512Gb",Platform:"闲鱼",Type:"硬盘",Condition:"二手"}, {id:32,Title:"七彩虹 256Gb",Platform:"京东",Type:"硬盘",Condition:"全新"}, {id:33,Title:"七彩虹 128Gb",Platform:"淘宝",Type:"硬盘",Condition:"全新"}, {id:34,Title:"东芝 512Gb",Platform:"转转",Type:"硬盘",Condition:"全新"}, {id:35,Title:"东芝 256Gb",Platform:"淘宝",Type:"硬盘",Condition:"二手"}, {id:36,Title:"东芝 128Gb",Platform:"京东",Type:"硬盘",Condition:"停售"}, ] }; }, computed: { ComDataList(){ return this.DataList.filter((item) => { if((this.PlatformVar=="全部"||this.PlatformVar==item.Platform)&& (this.TypeVar=="全部"||this.TypeVar==item.Type)&& (this.ConditionVar=="全部"||this.ConditionVar==item.Condition)){ return item // 把符合条件的数据返回,模板中通过this.ComDataList可直接动态读取数据 } }) }, }, mounted() { }, methods: { } }; </ script > < style > * { font-size: 14px; color: #333; box-sizing: border-box; } .container{ margin: 100px auto; width: 700px; border: 1px solid #ccc; border-radius: 3px; } .CationBox{ width: 100%; border-bottom: 1px solid #ccc; } .row{ width: 100%; height: 40px; display: flex; align-items: center; padding: 0px 10px; } .row > div{ flex-shrink: 0; } .row .content{ flex: 1; display: flex; } .row .content .item{ border-radius: 3px; color: #666; padding: 5px 12px; font-size: 12px; cursor: pointer; user-select: none; } .row .content .actvCss{ background: #39b8ff; color: #fff; } .ContentBox{ width: 100%; height: 450px; overflow: auto; padding: 10px; } .DataListBox{ width: 100%; display: flex; flex-wrap: wrap; } ::-webkit-scrollbar { display: none; /* Chrome Safari */ } .DataListBox .item{ padding: 2px 4px; flex-shrink: 0; width: 19%; height: 60px; color: #666; border-radius: 3px; border: 1px solid #ccc; margin-right: 1.25%; margin-bottom: 8px; display: flex; flex-direction: column; justify-content: space-between; } .DataListBox .item div{ font-size: 12px; } .DataListBox .item:nth-child(5n){ /* 需要一行显示几个商品,nth-child(5n)里的数字就设置成几n */ margin-right: 0px; } .nullCss{ margin: 60px auto; font-size: 14px; text-align: center; color: #999; } </ style > |
总结
到此这篇关于vue实现多条件筛选的文章就介绍到这了,更多相关vue多条件筛选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
关于vue3+echart5 遇到的坑 Cannot read properties of undefine
这篇文章主要介绍了vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type'),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04Vite Vue3 EsLint Prettier配置步骤极简方法详解
这篇文章主要为大家介绍了Vite Vue3 EsLint Prettier配置步骤的极简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09解决Can''t find variable: SockJS vue项目的问题
这篇文章主要介绍了解决Can't find variable: SockJS vue项目的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09vue项目中接入websocket时需要ip端口动态部署问题
这篇文章主要介绍了vue项目中接入websocket时需要ip端口动态部署问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
最新评论