这篇文章主要介绍了Vue多条件筛选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于Vue实现的多条件筛选功能(类似京东和淘宝功能)，可以支持多选、清空、全选功能，数据源是通过JSon格式的数据封装而成。
实现的效果图：
代码实现如下：
html:
<div id='app'> <div> <span>已选中:<span> <span class='active'>{{item.name}} | </span></div> <div class='nav'> <div class='mutil-query-title'>{{items.name}}<span style='margin-left: 20px'>全选</span>|<span>清空</span></div><ol> <li> <span>{{item.name}}</span></li></ol></div></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.fi<a style="color:transparent">本文来源gao($daima.com搞@代@#码(网5</a>lter(function(v2,i){ if(v.name==v2.name){ this.list.condition.splice(i,1); count--; } }); Vue.set(this.list.condition,count++,v); }); } } });
源码地址：http://xz.gaodaima.com:81/201905/yuanma/mutilQuery(gaodaima.com).rar
以上所述是小编给大家介绍的Vue多条件筛选功能详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对gaodaima搞代码网网站的支持！
以上就是基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
转载请注明原文链接：基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
