基于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中最常用的继承模式 组合继承
Aug 12 Javascript
jQuery插件的写法分享
Jun 12 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
Vue精简版风格概述
Jan 30 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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 采集心得技巧
2009/05/15 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python批量爬取下载抖音视频
2019/06/17 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
一些网络技术方面的面试题
2014/05/01 面试题
清洁工岗位职责
2014/01/29 职场文书
高中生逃课检讨书
2014/10/10 职场文书
郭明义观后感
2015/06/08 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
导游词之峨眉山
2019/12/16 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript