基于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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 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自动生成月历代码
2006/10/09 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
python动态加载包的方法小结
2016/04/18 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python实现连续图文识别
2018/12/18 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python的依赖管理的实现
2019/05/14 Python
Python csv模块使用方法代码实例
2019/08/29 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
python 高阶函数简单介绍
2021/02/19 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
局域网标准
2016/09/10 面试题
中专生自我鉴定范文
2013/12/19 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
名人演讲稿范文
2014/09/16 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
劳动仲裁调解书
2015/05/20 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS