开发小程序资质_基于Vue完成的多条件筛选功用的

基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)       这篇文章主要介绍了Vue多条件筛选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

基于Vue实现的多条件筛选功能(类似京东和淘宝功能)，可以支持多选、清空、全选功能，数据源是通过JSon格式的数据封装而成。

实现的效果图：

代码实现如下：

html:

 div id='app' 
 template v-if='condition.length' 
 div 
 span 已选中: span 
 span v-for='(item,index) in condition' {{item.name}} nbsp;| nbsp; /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:[

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