基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019-05-16 18:02
1121 查看
基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选、清空、全选功能,数据源是通过JSon格式的数据封装而成。
实现的效果图:
代码实现如下:
html:
<div id='app'> <template v-if='condition.length'> <div> <span>已选中:<span> <span v-for='(item,index) in condition' class='active'>{{item.name}} | </span> </div> </template> <template v-if='category.length'> <div class='nav' v-for='(items,index) in category'> <div class='mutil-query-title' v-if='items.name' :key="items.id">{{items.name}}<span style='margin-left: 20px;' @click='allIn(index)'>全选</span>|<span @click='remove(index)'>清空</span></div> <ol v-if='items.items.length'> <li v-for='(item,key) in items.items'> <span :class="{'active':item.active}" @click='handle(index,key)' :key='item.id'>{{item.name}}</span> </li> </ol> </div> </template> </div>
js代码如下:
var list={ category:[ { name:'品牌', items:[ { name:'联想', active: false }, { name:'小米', active: false }, { name:'苹果', active: false }, { name:'东芝', active: false } ] }, { name:'CPU', items:[ { name:'intel i7 8700K', active: false }, { name:'intel i7 7700K', active: false }, { name:'intel i9 9270K', active: false }, { name:'intel i7 8700', active: false }, { name:'AMD 1600X', active: false } ] }, { name:'内存', items:[ { name:'七彩虹8G', active: false }, { name:'七彩虹16G', active: false }, { name:'金士顿8G', active: false }, { name:'金士顿16G', active: false } ] }, { name:'显卡', items:[ { name:'NVIDIA 1060 8G', active: false }, { name:'NVIDIA 1080Ti 16G', active: false }, { name:'NVIDIA 1080 8G', active: false }, { name:'NVIDIA 1060Ti 16G', active: false } ] } ], condition:[ ] };
var count=0; var app =new Vue({ el:'#app', data:list, methods:{ handle:function(index,key){ var item=this.category[index].items; item.filter(function(v,i){ if(i==key){ v.active=true; this.list.condition.filter(function(v2,i){ if(v.name==v2.name){ this.list.condition.splice(i,1); count--; } }); Vue.set(this.list.condition,count++,v); } }); }, remove:function(index){ var item=this.category[index].items; item.filter(function (v1,key) { v1.active=false; this.list.condition.filter(function(v2,i){ if(v1.name==v2.name){ this.list.condition.splice(i,1); count--; } }); }); }, allIn:function(index){ var item=this.category[index].items; item.filter(function (v,key) { v.active=true; this.list.condition.filter(function(v2,i){ if(v.name==v2.name){ this.list.condition.splice(i,1); count--; } }); Vue.set(this.list.condition,count++,v); }); } } });
源码地址:http://xz.jb51.net:81/201905/yuanma/mutilQuery(jb51.net).rar
以上所述是小编给大家介绍的Vue多条件筛选功能详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)
- 基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)
- vue实现的仿淘宝购物车功能详解
- 类似京东的商品筛选功能的实现,电子商城的产品筛选功能是怎么实现的?
- vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- 基于JavaScript实现前端数据多条件筛选功能
- vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
- 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- 类似京东的商品筛选功能的实现,电子商城的产品筛选功能是怎么实现的?
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- javascript实现 京东淘宝等商城的商品图片大图预览功能
- Android 图片裁剪功能实现详解(类似QQ自定义头像裁剪)
- vue实现筛选功能
- 基于.NET实现淘宝发布宝贝功能(三)
- Android 图片裁剪功能实现详解(类似QQ自定义头像裁剪)
- Android使用RadioGroup和RadioButton实现筛选条件功能总结好坑啊
- Android 图片裁剪功能实现详解(类似QQ自定义头像裁剪)