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

场景

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

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

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

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

进而设置对应的图片Url。

 

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

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

注：

博客：
​​霸道流氓气质的博客_博客-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`;