基于某视频剪辑软件实现的多条件筛选功能（类似京东和淘宝功能),可以支持多选、清空、全选功能，数据源是通过数据格式的数据封装而成。

实现的效果图：

代码实现如下：

html:

div id='app '模板v-if='condition.length'divspan已选中： span v-for='(项，索引)在条件class=' active ' { item。name } } |/span/div/template模板v-if=' category。length ' div class=' nav ' v-for='(项，索引)在类别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="移除（索引)"清空/span/divol v-if=' items。物品。items中的length ' Li v-for='(item，key)。items ' span : class=' { ' active ' : item。active }“@ click=”句柄(索引，键)“:键=”项。id“{ item。名称} }/span/Li/div/模板/div js代码如下：

var list={ category : [{ name : '品牌，项目：[{ 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 3: ' Intel i7 8700 '，active 3:内存，项目：[{ name : }七彩虹8G '，active: false}，{name: '七彩虹16G '，active: false}，{name: '金士顿8G '，active: false}，{name: '金士顿16G '，active: false}]}，名称： '显卡，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计数=0;var app=new Vue({el:'#app '，data:list，methods : { handle : function(index，key){ var item=this。类别[索引]).物品；item.filter(function(v，I){ if(I==key){ v . active=true；this.list.condition.filter(函数(v2，I){ if(v . name==v2。名称){这个。名单。条件。拼接(，1)；计数-;}});Vue.set(this.list.condition，count，v)；}});}，删除：函数(索引){ var item=this。类别[索引].物品；item.filter(function (v1，key){ v1。active=falsethis.list.condition.filter(函数(v2，I){ if(v1。name==v2。名称){这个。名单。条件。拼接(，1)；计数-;}});});}，all : FuncTion(index){ var item=this。类别[索引].物品；item.filter(function (v，key){ v . active=true；this.list.condition.filter(函数(v2，I){ if(v . name==v2。名称){这个。名单。条件。拼接(，1)；计数-;}});Vue.set(this.list.condition，count，v)；});}}});源码地址：http://xz。JB 51。净额：81/201905/马援/mutilQuery(jb51.net).压缩包

以上所述是小编给大家介绍的某视频剪辑软件多条件筛选功能详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！