处理key value数据

最新推荐文章于 2024-08-15 08:55:57 发布
最新推荐文章于 2024-08-15 08:55:57 发布
阅读量140 收藏
点赞数 3
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59527403/article/details/140003699
版权

在这里插入图片描述
在这里插入图片描述

循环以上数据

	<u-popup :round="10" :show="tab === 'OilType'" @close="close" mode="bottom">
			<view class="container">
				<view v-for="(allData, allType) in allList" :key="allType">
					<view class="title">{{ allType }}</view>
					<view class="box">
						<view v-for="item in allData" :key="item.id" @click="checkItem(item,allType)"
							:class="{ active: isActive(item, allType) }">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>

css

	.container .title {
		display: flex;
		margin: 10rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 700;
		font-size: 32rpx;
		color: #1A1D1F;
	}

	.container .box {
		display: flex;
		margin: 10rpx 0;
		flex-wrap: wrap;
		justify-content: left;
	}

	.container .box>view {
		border: 1px solid #ccc;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 6rpx 46rpx;
		margin: 10rpx;
		text-align: center;
	}

	.container .box .content:last-child {
		margin-right: 0;
	}

	.container .box>view.active {
		padding: 6rpx 46rpx;
		background-color: rgb(251, 227, 213) !important;
		text-align: center;
		font-size: 24rpx;
		border-radius: 50rpx;
		border: 2rpx solid #FD893F !important;
		color: #FD893F;
	}

完整代码

<template>
	<view class="hello">
		<view class="filter">
			<view @click="checkTab('OilType')" :class="{ active: !!allSelectData }">
				{{ allSelectData ? allSelectData : "全部" }}
				<text class="icon cuIcon-triangledownfill"></text>
			</view>
			<view @click="checkTab('distance')" :class="{ active: !!disSelectData }">
				{{ disSelectData ? disSelectData : "距离" }}
				<text class="icon cuIcon-triangledownfill"></text>
			</view>
			<view @click="checkTab('filter')">
				筛选
				<text class="icon cuIcon-triangledownfill"></text>
			</view>
		</view>
		<u-popup :round="10" :show="tab === 'OilType'" @close="close" mode="bottom">
			<view class="container">
				<view v-for="(allData, allType) in allList" :key="allType">
					<view class="title">{{ allType }}</view>
					<view class="box">
						<view v-for="item in allData" :key="item.id" @click="checkItem(item,allType)"
							:class="{ active: isActive(item, allType) }">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :round="10" :show="tab === 'distance'" @close="close" mode="bottom">
			<view class="distance">
				<view class="disItem" v-for="(item, index) in distance" :key="index" @click="checkDistance(item)">
					<view class="title">{{ item.title }}</view>
				</view>
			</view>
		</u-popup>
		<u-popup :round="10" :show="tab === 'filter'" @close="close" mode="bottom">
			<view class="container">
				<view v-for="(item, itemIndex) in filter" :key="itemIndex">
					<view>
						<view class="title">{{ item.title }}</view>
						<view class="box">
							<view class="content" v-for="(f, fIndex) in item.children" :key="fIndex"
								@click="checkFilter(itemIndex, fIndex)" :class="{ active: f.check }">
								{{ f.title }}
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<button class="btnOne" type="info" @click="reSet">重置</button>
					<button class="btnTwo" type="primary" @click="success">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		oilType
	} from '@/api/distance.js'
	export default {
		props: {},
		data() {
			return {
				activeType: null, // 当前活动的类型（汽油、柴油等）  
				activeId: null, // 当前活动的ID  
				allSelectData: "", //全部
				disSelectData: "", //距离
				tab: "", //控制弹框的显示与隐藏 
				allList: {},
				distance: [{
					title: '距离最近'
				}, {
					title: '推荐排序'
				}, {
					title: '价格降序'
				}, {
					title: '价格升序'
				}],
				filter: [{
					title: "周边",
					children: [{
							title: "洗手间",
							check: false,
						}, {
							title: "提供发票",
							check: false,
						}, {
							title: "便利店",
							check: false,
						},
						{
							title: "免费洗车",
							check: false,
						},
						{
							title: "免费就餐",
							check: false,
						},
					],
				}, ]
			};
		},
		onShow() {

		},
		methods: {
			// 全部数据
			getOilType() {
				oilType().then(res => {
					this.allList = res.data.data
				})
			},
			// 全部弹框信息
			checkItem(item, allType) {
				// 更新活动的类型和ID  
				this.activeType = allType;
				this.activeId = item.id;
				// 关闭弹框  
				this.close();
			},
			// 高亮
			isActive(item, allType) {
				// 判断当前项是否是活动的  
				return this.activeType === allType && this.activeId === item.id;
			},
			// 关闭
			close() {
				this.tab = "";
			},
			// tab栏
			checkTab(type) {
				this.tab = type;
				this.getOilType()
			},
			// 距离
			checkDistance(item) {
				item.check = true;
				if (item.title === '推荐排序') {
					this.disSelectData = '推荐';
				} else if (item.title === '距离最近') {
					this.disSelectData = '距离';
				} else if (item.title === '价格降序' || item.title === '价格升序') {
					this.disSelectData = '价格';
				}
				this.tab = "";

			},
			// 筛选
			checkFilter(f) {
				f.check = true
				this.tab = "";
			},
			checkFilter(itemIndex, fIndex) {
				// 切换当前选项的选中状态  
				this.filter[itemIndex].children[fIndex].check = !this.filter[itemIndex].children[fIndex].check;
			},
			success() {
				// 处理确定按钮的逻辑，比如提交筛选条件等  
				// 然后关闭弹出窗口  
				this.tab = ''; // 假设关闭弹出窗口是通过将tab设置为空字符串实现的  
			},
			reSet() {
				// 重置所有选项的选中状态  
				this.filter.forEach(item => {
					item.children.forEach(f => {
						f.check = false;
					});
				});
			}
		},
	};
</script>

<style lang="scss">
	.icon {
		color: #A7A7A7;
	}

	.filter {
		display: flex;
		justify-content: space-between;
	}

	.filter>view {
		margin-left: 80rpx;
		/* width: 33%; */
	}

	.filter>view.active {
		color: #FD893F;

	}

	.distance {
		padding: 30rpx 48rpx;

		.disItem {
			text-align: center;
			line-height: 100rpx;
			height: 100rpx;
			width: 100%;
			border-bottom: 2rpx solid #f9f9f9;
		}
	}

	.container {
		padding: 30rpx 48rpx;


		.bottom {
			display: flex;
			justify-content: space-between;


			.btnOne {
				width: 100%;
				margin-right: 10rpx;
				font-size: 28rpx;
			}

			.btnTwo {
				width: 100%;
				font-size: 28rpx;
			}
		}

	}

	.container .title {
		display: flex;
		margin: 10rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 700;
		font-size: 32rpx;
		color: #1A1D1F;
	}

	.container .box {
		display: flex;
		margin: 10rpx 0;
		flex-wrap: wrap;
		justify-content: left;
	}

	.container .box>view {
		border: 1px solid #ccc;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 6rpx 46rpx;
		margin: 10rpx;
		text-align: center;
	}

	.container .box .content:last-child {
		margin-right: 0;
	}

	.container .box>view.active {
		padding: 6rpx 46rpx;
		background-color: rgb(251, 227, 213) !important;
		text-align: center;
		font-size: 24rpx;
		border-radius: 50rpx;
		border: 2rpx solid #FD893F !important;
		color: #FD893F;
	}
</style>
愿➣
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android、Java处理Json，获取Key和Value
flq0716flq的博客
11-14 2001
1、返回的json串： {"words_result_num": 5, "words_result": {"公司代码": "RAWU", "集装箱编号": "210063", "校验码识别": "6", "校验码计算": "6", "其他": "22G1"}} 2、解析json，然后用Iterator迭代器遍历取值获取key和value，保存到封装的对象中： KeyBean bean ; priv...
数据库的数据结构（1）——key-value
L1kk_的博客
01-09 4002
数据库的日志系统 许多数据库内部使用日志，日志是一个只支持追加更新的记录序列的集合，通常存储了大量的数据。如果每查询一条数据要从头到位扫描整个数据文件来查找数据所在的位置，查找的开销是O(n)，并不是是十分友好。为了高效从数据库中查找到特定的值，需要新的数据结构：索引。 索引是基于原始数据派生而来的额外数据结构，许多数据库允许单独增加和删除索引，而不影响数据库的内容，只影响查询性能。维护额外的数据结构必然带来额外的写入开销。对于写入，很难超过单纯以追加文件方式的性能。 适当的索引可以加速读取查询，但每个
理解Attention机制的query key value
Site1997的博客
11-23 2757
本文介绍了深度学习的注意力机制(Attention)，并解释了query key value 的意义。
python处理key-value脚本
天天water的专栏
12-26 6653
实现目标：把key-value配置文件解析，并根据解析内容执行一定的命令操作 （注意：配置文件可能是key=value或者key=value1 value2.···的形式） V1.0代码如下（后续继续优化）： #!/usr/bin/env python # -*- coding:utf-8 -*- """ This module is *** init config from al
java 枚举定义key-value_enum-枚举当做key-value业务使用
weixin_34312149的博客
02-13 3691
1.枚举当做key-value业务使用package com.uwillbe.pad.enums;import java.util.ArrayList;import java.util.List;/*** @Author: 姿势帝* @Description:* @Date: Create in 14:36 2019/1/27*/public enum GroupEnum {/*** 分组id与分...
C# 键值对 KeyValue 解析
SumC Ronnie的博客
06-17 2万+
最近看到一个输入字符串或者字节数组解析成键值对的代码，可能对大家有用，简单的写了一下。 当然，你可以用JSON.NET去处理JSON类型的键值对，网上很多资料，就不多说，这里主要说是类似于自定数据格式，类似这样的字符串：string data = "sdada=57.4,aaasd=1234,fdafdsa=3.2,fdsafdsa=3.515,fdsafd=-3.471,gfdasgfd=0.0
分布式 - Redis热点key大Value解决方案
热门推荐
简单记录一下。
10-13 21万+
不啰嗦，我们直接开始！ 引言 关于 Redis 热点数据 & 大 key 大 value 问题也是容易被问的高阶问题，不如一次痛快点学完，让面试官无话可说，个人工作经验中，热点数据问题在工作中相比雪崩更容易遇到，只是大部分时候热点不够热，都会被提前告警解决，但这个问题一旦控制不了造成的线上问题也是足够让你今年绩效垫底了，废话不说进入正题。 正常情况下，Redis 集群中数据都是均匀分配到每个节点，请求也会均匀的分布到每个分片上，但在一些特殊场景中，比如外部爬虫、攻击、热点商品等，最典型的就是明
Flink keyby 数据倾斜问题处理
jast
04-05 1万+
上一篇我们使用keyby后发现数据严重倾斜 https://blog.csdn.net/zhangshenghang/article/details/105316728 大概看下问题所在，大量数据在一个subtask中运行 这里我们使用两阶段keyby解决该问题 之前的问题如下图所示 我们期望的是 但我们的需要根据key进行聚合统计，那么把相同的key放在不同的sub...
海量数据存储之Key-Value存储简介
渡江客涂鸦板
08-07 5488
Key-value存储简介具备高可靠性及可扩展性的海量数据存储对互联网公司来说是一个巨大的挑战，传统的数据库往往很难满足该需求，并且很多时候对于特定的系统绝大部分的检索都是基于主键的的查询，在这种情况下使用关系型数据库将使得效率低下，并且扩展也将成为未来很大的难题。在这样的情况下，使用Key-value存储将会是一个很好的选择。它被广泛应用于缓存，搜索引擎等等领域。         根据以上的描述...
前端获取对象key,value
qq_48964916的博客
12-09 1629
const a = Object.keys(this.modelDataall)//获取key的集合 const b = Object.values(this.modelDataall)//获取value的集合
浅谈JsonObject中的key-value数据解析排序问题
10-18
本文将深入探讨JsonObject中key-value数据解析的排序问题，以及如何实现有效的排序。 首先，让我们来理解JsonObject及其内部结构。JsonObject是JSON（JavaScript Object Notation）数据格式的一种表现形式，是一种...
mysql实现本地keyvalue数据库缓存示例
09-10
MySQL实现本地Key-Value数据库缓存是一种轻量级的数据存储策略，它在内存中存储键值对，以提高数据访问速度。在某些场景下，如小型应用或对实时性要求不高的系统中，使用本地缓存可以避免依赖外部服务，如Memcached...
key_value_display.zip_单片机KeyVaLue
09-20
【标题】"KeyVaLue在51单片机中的实现" 51单片机是微控制器领域中广泛应用的一种型号，以其结构简单、性价比高而著名。本项目"key_value_display.zip"着重展示了如何在51单片机上实现按键中断处理以及数据显示功能...
Python查找不限层级Json数据中某个key或者value的路径方式
12-20
本篇文章将深入探讨如何在不限层级的JSON数据中查找特定的键（key）或值（value）的路径。 首先，让我们了解标题和描述中提到的Python脚本。这个脚本定义了一个名为`HandleJson`的类，它的主要功能是遍历JSON结构并...
ECMAScript性能优化技巧与陷阱：深入探索与实践
最新发布
Chujun123528的博客
08-15 619
ECMAScript性能优化是一个复杂而细致的过程，需要开发者从多个角度进行考虑和优化。通过合理利用现代JavaScript特性、优化DOM操作、选择合适的算法和数据结构、利用Web Workers等技术手段，可以显著提升JavaScript代码的执行效率。同时，开发者还需要关注全局变量、闭包、eval等性能陷阱，避免不必要的性能开销。此外，性能监控与分析、内存管理、网络层面的优化等也是不可忽视的重要方面。只有综合考虑这些因素，并持续进行性能优化工作，才能为用户提供更加流畅、高效的Web应用体验。
提升前端性能的JavaScript技巧
han2434的博客
08-14 688
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 150
【代码】playwright链接本地浏览器，实现自动登录。
【无标题】
weixin_42348009的博客
08-14 115
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
Vue2 axios
qq_53374893的博客
08-14 85
说明一下， 当前服务器 有资源 就不会走代理服务器了，直接返回当前资源 而且只能代理一个服务器.
mysql key value 数据存储
06-08
MySQL是一个关系型数据库管理系统，不是一个key-value数据库。虽然MySQL可以存储键值对数据，但是它并不是最适合用来存储key-...这些NoSQL数据库具有更高的性能和更好的可伸缩性，可以更好地处理大量的key-value数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值