基于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隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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代码
2012/07/17 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书