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


Posted in Javascript onMay 07, 2019

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

实现的效果图:

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

代码实现如下:

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);
			});			
		}
	}

});

源码地址:http://xz.3water.com:81/201905/yuanma/mutilQuery(3water.com).rar

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

Javascript 相关文章推荐
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
jQuery 联动日历实现代码
May 31 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
详解vue中使用protobuf踩坑记
May 07 #Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 #Javascript
微信小程序扫描二维码获取信息实例详解
May 07 #Javascript
Vue数据绑定简析小结
May 07 #Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 #Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 #Javascript
webpack结合express实现自动刷新的方法
May 07 #Javascript
You might like
PHP二维数组去重实例分析
2016/11/18 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python实现二分法算法实例
2015/02/02 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python实现顺序表的简单代码
2018/09/28 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
大学生见习报告总结
2014/11/04 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js