当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

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

2019年07月20日  | 移动技术网IT编程  | 我要评论

风云游戏直播,通辽五中张莹,中秋促销

基于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}} | </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
			},
			{
				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.filter(function(v2,i){
					if(v.name==v2.name){
						this.list.condition.splice(i,1);
						count--;
					}
				});					
				vue.set(this.list.condition,count++,v);
			});			
		}
	}

});

源码地址：

以上所述是小编给大家介绍的vue多条件筛选功能详解整合，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网