基于Vue實現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)

更新時間：2019年05月07日 09:15:31 作者：丹青筆墨

這篇文章主要介紹了Vue多條件篩選功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

基于Vue實現(xiàn)的多條件篩選功能(類似京東和淘寶功能)，可以支持多選、清空、全選功能，數(shù)據(jù)源是通過JSon格式的數(shù)據(jù)封裝而成。

實現(xiàn)的效果圖：

代碼實現(xiàn)如下：

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:'聯(lián)想',
				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:'內(nèi)存',
			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);
			});			
		}
	}

});

源碼地址：http://xz.jb51.net:81/201905/yuanma/mutilQuery(jb51.net).rar

以上所述是小編給大家介紹的Vue多條件篩選功能詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: