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

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

});

源码地址:http://xz.jb51.net:81/201905/yuanma/mutilQuery(jb51.net).rar

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

(0)

相关推荐

  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-

  • Vue通过input筛选数据

    本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&

  • Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条

  • 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求. 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一

  • vuejs实现本地数据的筛选分页功能思路详解

    今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进行数据筛选,实现自动分页,自动生成页数,点击自动跳转 项目代码:js代码 var subList=new Vue({ el:'#main', data:{ // subcontentData为本地数据 subContents:subcontentData, // 页面需要展现的数据 yemianda

  • vue分类筛选filter方法简单实例

    本文实例为大家分享了vue分类筛选filter方法的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title>filter</title> </head> <body> <div id="app"> <ul> <li v-for="item in filterlist"

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

    基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app'> <template v-if='condition.length'> <div> <span>已选中:<span> <span v-for='(item,index) in condition' class='active'>{{item

  • 基于Vue实现图片在指定区域内移动的思路详解

    当图片比要显示的区域大时,需要将多余的部分隐藏掉,我们可以通过绝对定位来实现,并通过动态修改图片的left值和top值从而实现图片的移动.具体实现效果如下图,如果我们移动的是div 实现思路相仿. 此处需要注意的是 我们在移动图片时,需要通过draggable="false" 将图片的 <img src="/static/pano-dev/test/image-2.jpg" draggable="false" />,否则按下鼠标监听o

  • vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

    主要运用 template 标签,可相当于 php foreach() foreach(lists as $key){ //todo foreach($key.自定义字段 as k){ //todo } } <template v-for="key in lists" v-cloak> <tr> <td></td> <td ></td> <td ></td> <td ></

  • laravel5.3 vue 实现收藏夹功能实例详解

    下面通过本文给大家介绍laravel5.3 vue 实现收藏夹功能,具体代码如下所述: { "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3

  • Springboot Vue实现单点登陆功能示例详解

    目录 正文 简单上个图 先分析下登陆要做啥 怎么落实? 上代码 接口: token生成部分 刷新token 验证token 正文 登陆是系统最基础的功能之一.这么长时间了,一直在写业务,这个基础功能反而没怎么好好研究,都忘差不多了.今天没事儿就来撸一下. 以目前在接触和学习的一个开源系统为例,来分析一下登陆该怎么做.代码的话我就直接CV了. 简单上个图 (有水印.因为穷所以没开会员) 先分析下登陆要做啥 首先,搞清楚要做什么. 登陆了,系统就知道这是谁,他有什么权限,可以给他开放些什么业务功能,

  • .NET 6实现基于JWT的Identity功能方法详解

    目录 需求 目标 原理与思路 实现 引入Identity组件 添加认证服务 使用JWT认证和定义授权方式 引入认证授权中间件 添加JWT配置 增加认证用户Model 实现认证服务CreateToken方法 添加认证接口 保护API资源 验证 验证1: 验证直接访问创建TodoList接口 验证2: 获取Token 验证3: 携带Token访问创建TodoList接口 验证4: 更换Policy 一点扩展 总结 参考资料 需求 在.NET Web API开发中还有一个很重要的需求是关于身份认证和授

  • vant/vue实现小程序下拉刷新功能方法详解

    首先先把van-list控件放入列表项中 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <list-nav :list="list"></list-nav> </van-list> data(){ return{ list: [],

  • 基于asp.net MVC 应用程序的生命周期(详解)

    首先我们知道http是一种无状态的请求,他的生命周期就是从客户端浏览器发出请求开始,到得到响应结束.那么MVC应用程序从发出请求到获得响应,都做了些什么呢? 本文我们会详细讨论MVC应用程序一个请求的生命周期,从一个控件到另一个控件是怎样被处理的.我们还会详细介绍一下整个请求的生命周期中,用到的相关组件.因为在平常的开发过程中,我们可能知道怎样去使用MVC框架来处理相关的请求,大部分的时候我们只是在controller和action方法之间做相关的处理,对于真正内在的运行机制可能不是很了解.其实

  • java并发等待条件的实现原理详解

    前言 前面介绍了排它锁,共享锁的实现机制,本篇继续学习AQS中的另外一个内容-Condition.想必学过java的都知道Object.wait和Object.notify,同时也应该知晓这两个方法的使用离不开synchronized关键字.synchronized是jvm级别提供的同步原语,它的实现机制隐藏在jvm实现中.作为Lock系列功能中的Condition,就是用来实现类似 Object.wait和Object.notify 对应功能的. 使用场景 为了更好的理解Lock和Condit

随机推荐