基于Vue实现的多条件筛选功能(类似京东和淘宝功能)，可以支持多选、清空、全选功能，数据源是通过JSon格式的数据封装而成。
实现的效果图：
代码实现如下：
html:
<div> <template v-if='condition.length'> <div> <span>已选中:<span> <span v-for='(item,index) in condition'>{{item.name}} | </span> </div> </template> <template v-if='category.length'> <div v-for='(items,index) in category'> <div v-if='items.name' :key="items.id">{{items.name}}<span @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); }); } } });
源码地址：:81/201905/yuanma/mutilQuery(jb51.net).rar
以上所述是小编给大家介绍的Vue多条件筛选功能详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: