基于Vue实现的多条件筛选功能(类似京东和淘宝功能)

基于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}}&nbsp;|&nbsp;</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