Vue中多条件图片路径通过Map存储获取避免嵌套if-else

news2024/12/24 0:24:22

场景

若依前后端分离版手把手教你本地搭建环境并运行项目:

若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_前后端分离项目本地运行

前端接收到后台数据之后需进行多个条件判断进而显示对应的图片路径。

比如先判断车辆的类型、再判断车辆方向、再判断车辆是否在线等条件之后

进而设置对应的图片Url。

 

首先将各种情况下图标按照类型_方向等规范命名,比如:pickup_car_left.png

就代表皮卡类型方向向左的图片。

注:

博客:
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、首先将各种情况车辆类型与后台数据映射关系封装到js文件index.js中

const carArray = [
    ["1", "person_car"],
    ["2", "hopper_car"],
    ["3", "pickup_car"],
    ["4", "tank_car"],
    ["5", "vehicle_car"],
    ["9", "watering_car"],
];
const carMap = new Map(carArray);

export {
    carMap,
};

比如这里后台传输“1”就代表人车类型,其他以此类推。

2、然后在vue页面中引入

import {carMap } from "./index.js";

3、再收到后台数据时动态拼接图片路径

先根据Map映射获取车辆类型

                let carType = "";
                carType = carMap.get(item.carType);

其中Item.carType是后台获取的车辆类型数据

然后进行方向的判定

                let url = "";
                let carType = "";
                let direction = "";
                carType = carMap.get(item.carType);
           
                item.vehicleDirection ? (direction = "right") : (direction = "left");
                url = `images/${carType}_${direction}.png`;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/67049.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第十三章:AQS

AQS 基础概念为什么 AQS 是 JUC 最重要的基石?AQS 能干什么AQS内部结构AQS内部类NodeAQS 源码分析以 lock方法为入口讲解nonfairTryAcquire 方法addWaiter方法线程B线程CacquireQueued 方法B节点C节点unlockcancelAcquire 方法总结AQS 基础概念 AQS 全称&#xff1…

【树莓派】了解wiringPi库、控制继电器

目录一、wiringPi库二、继电器1、继电器介绍及接线说明2、树莓派控制继电器一、wiringPi库 wiringPi是一个很棒的树莓派IO控制库,使用C语言开发,提供了丰富的接口:GPIO控制,中断,多线程等。 在树莓派命令行输入gpio -…

供应商管理软件有哪些特点和优势?

在这个快节奏的商业环境中,企业常常需要同时处理多个供应商。手动处理所有这些流程会有不少困难,为了克服这个问题,供应商管理软件是市场上可用的最佳解决方案。 好用的供应商管理软件,比如广受客户好评的8Manage SRM&#xff0c…

Spring 长事务导致connection closed,又熬了一个大夜!

大家好,我是不才陈某~ 是的,今早一到公司就收到了机器人的告警,从异常日志来看是数据库连接已关闭,然后我在解决这个问题的过程中发现了几个问题,不急,听我一一道来 异常被try后没有继续抛出,导…

CN_广域网WAN@PPP协议

文章目录WAN和LANPPP协议PPP协议有三个组成部分:LCPNCP成帧方法PPP帧的格式信息部分范围工作过程PPP协议特点透明传输WAN&InternetWAN和LAN WAN:广域网(全写为 wide area network) 广 域 网局 域 网覆盖范围很广,通常跨区域较小,通常在一个区域内连…

Ubuntu内核OverlayFS权限逃逸漏洞(CVE-2021-3493)

文章目录前言关于linux kernel一、漏洞介绍二、漏洞原理三、漏洞影响版本四、漏洞复现五、修复方法前言 关于linux kernel Linux Kernel 一般指Linux内核。Linux是一种开源电脑操作系统内核。它是一个用C语言写成,符合POSIX标准的类Unix操作系统。 一、漏洞介绍 …

如何掌握HEC-RAS建模方法与涉河建设项目防洪评价报告编制

随着社会经济的快速发展,我国河道周边土地开发利用率不断增大,临河建筑物与日俱增,部分河道侵占严重,导致防洪压力增大。迫切需要对全国从事防洪评价咨询类的技术人员开展防洪评价技术方面的学习,为了让相关工程技术人…

深度学习-支持向量机(SVM)

1. 简介 在机器学习领域,支持向量机SVM(Support Vector Machine)是一个有监督的学习模型,通常用来进行模式识别、分类(异常值检测)以及回归分析。SVM算法中,我们将数据绘制在n维空间中(n代表数据的特征数),…

C++ 函数指针探幽

首先看下面两个声明代表什么意思? double* (*(*pf)[2])(double*,int); double* (*pa[2])(double*,int);要搞清楚这两个式子,则先要清楚 指向指针的指针指针数组与指向数组的指针函数指针 指向指针的指针 指针的指针特殊点在于指向的是一个指针而已&am…

栈与队列2:用队列实现栈

主要是我自己刷题的一些记录过程。如果有错可以指出哦,大家一起进步。 转载代码随想录 原文链接: 代码随想录 leetcode链接:344. 反转字符串 题目: 请你仅使用两个队列实现一个后入先出(LIFO)的栈&#x…

计量经济学复习

计量经济学 习题(史浩江版) 习题一 一. 单项选择题 1、横截面数据是指(A)。 A 同一时点上不同统计单位相同统计指标组成的数据 B 同一时点上相同统计单位相同统计指标组成的数据 C 同一时点上相同统计单位不同统计指标组成的…

GPT-Chinese 复现

github 环境准备 conda -create gpt_cn python3.7 conda activate gpt_cnconda install pytorch1.10.0 torchvision0.11.0 torchaudio0.10.0 -c pytorch pip install -r requirements.txt错误 module distutils has no attribute version解决方案: pip uninstal…

[附源码]计算机毕业设计基于Springboot游戏交易平台

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

MinIO实战

1.简介 MinIO 是一款基于Go语言发开的高性能、分布式的对象存储系统。客户端支持Java,Net,Python,Javacript, Golang语言。 2.部署 2.1单机器单节点(docker) 官网教程:https://min.io/docs/minio/container/index.html mkdir -p ~/minio/dat…

Node.js编程

Node.js编程 一、实验目的与要求 实验任务 用户信息增删改查 掌握数据库软件的安装了解集合、文档的概念掌握使用mongoose创建集合的方法创建集合掌握对数据库中的数据进行增删改查操作 二、实验任务和步骤 实验1. 用户信息增删改查 需求说明 (1)搭建网站服务器&#xf…

第十章 降维与度量学习

10.1 k近邻学习 k近邻学习(kNN)是一种常用的监督学习方法,其工作机制非常简单:给定测试样本,基于某种距离度量找出训练集中与其最靠近的k个训练样本,然后基于这k个邻居的信息来进行预测。 k近邻学习似乎与…

2022 计网复习计算题【太原理工大学】

期末复习汇总,点这里!https://blog.csdn.net/m0_52861684/category_12095266.html?spm1001.2014.3001.5482 三、计算题 1. 假定 1km 长的 CSMA/CD 网络的数据率为 1Gb/s,设信号在网络上的传播速率为 200000km/s。求能够使用此协议的最短帧长…

java swing(GUI) MySQL实现的学生选课成绩管理系统源码+运行教程

今天给大家演示一下由Java swing mysql实现的一款学生选课成绩信息管理系统,主要实现的功能有:学生教师信息管理、年级班级信息管理、课程信息管理、选课、成绩录入功能、成绩统计功能,实现学生、教师、管理员三个角色的登录,三个…

【计算机图形学入门】笔记1:图形学概述

前言:今天开始开启一个新篇章的学习,那就是games101闫令琪老师讲的《现代计算机图形学入门》课程,我会根据闫老师每节课讲的内容记录重点笔记,每节课都会整理一篇发布出来,希望自己可以坚持下去,从图形学小…

可视化音视频分析工具:好用工具大集锦,快转发给你兄弟看看丨音视频工具

(本文基本逻辑:音画原始数据分析工具介绍 → 编码数据分析工具介绍 → 封装格式分析工具介绍) 工欲善其事,必先利其器。在音视频开发中,为了方便、快捷、直观的分析音视频数据,最好能有一些可视化的分析工…