vue通过后台返回的数字显示不同的文字内容,多个内容用、隔开

news/2024/7/8 2:52:22 标签: vue.js, javascript, 前端

后台返回的数据

显示效果:

html:

  <el-table-column
          align="center"
          label="使用过的小程序"
          width="124"
          v-if="activeTab == 0"
        >
          <template #default="scope">
            <div
              v-for="(item, index) in scope.row.used_applet.split(',')"
              :key="index"
            >
            {{ appletVal[item] }}
              // 判断最后一个元素不显示、
              <span v-if="index !== scope.row.used_applet.split(',').length - 1"
                >、</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="注册来源"
          width="124"
          v-if="activeTab == 0"
        >
          <template #default="scope">
            {{ scope.row.source ? appletVal[scope.row.source] : "-" }}
          </template>
        </el-table-column>

 js:

const appletVal = {
  0: "-",
  1: "跳乐乐小程序",
  2: "竞赛车小程序",
  3: "室外小程序"
};

//如果返回的值是按1,2,3三这种下标顺序返回的可以直接简写成下面的形式,没有为0的返回值,所以第一位空出来
//const appletVal = ["", "跳乐乐小程序", "竞赛车小程序", "室外小程序"];


http://www.niftyadmin.cn/n/5536134.html

相关文章

【论文阅读】-- Strscope:不规则测量的时间序列数据的多尺度可视化

Stroscope: Multi-Scale Visualization of Irregularly Measured Time-Series Data 摘要1 引言2相关工作2.1&#xff08;大型&#xff09;时间序列数据可视化2.2 事件序列数据可视化2.3 评价 3问题分析3.1 数据集3.2 场景——现状3.3 设计流程3.4 设计原理 4 涟漪图&#xff1a…

Camera Raw:红眼

Camera Raw 的红眼 Red Eye面板可高效地修正照片中的红眼现象。 红眼现象通常是由于闪光灯直接照射到眼睛内的视网膜所引起的&#xff0c;在摄影中常见于低光环境下的拍摄&#xff0c;尤其是在人物和宠物照片中。 在一些老照片中可能存在红眼现象&#xff0c;现代摄影技术基本上…

【CT】LeetCode手撕—4. 寻找两个正序数组的中位数

目录 题目1- 思路2- 实现⭐4. 寻找两个正序数组的中位数——题解思路 3- ACM 实现 题目 原题连接&#xff1a;4. 寻找两个正序数组的中位数 1- 思路 思路 将寻找中位数 ——> 寻找两个合并数组的第 K 大 &#xff08;K代表中位数&#xff09; 实现 ① 遍历两个数组 &am…

【机器学习实战】Baseline精读笔记

比赛用到的库 numpy&#xff1a;提供&#xff08;多维&#xff09;数组操作 pandas&#xff1a;提供数据结构、数据分析 catboost&#xff1a;用于机器学习的库&#xff0c;特别是分类和回归任务 sklearn.model_selection&#xff1a;包含模型选择的多种方法&#xff0c;如交…

【第六节】C/C++静态查找算法

目录 前言 一、搜索查找 二、查找算法 1. 线性查找&#xff08;Linear Search&#xff09; 2. 二分查找&#xff08;Binary Search&#xff09; 3. 插值查找&#xff08;Interpolation Search&#xff09; 4. 哈希查找&#xff08;Hash Search&#xff09; 5. Fibonacc…

【Git】忘记切换分支! 如何将一个分支上的修改转移到另一个分支上去?

【Git】忘记切换分支! 如何将一个分支上的修改转移到另一个分支上去? step1: 使用git stash暂存修改step2: 切换回要提交的分支step3: 应用特定的stash step1: 使用git stash暂存修改 git stash 命令可以添加一些描述性的信息, 方便识别自己的暂存内容. 以下是具体的使用方法…

基于Hadoop平台的电信客服数据的处理与分析④项目实现:任务15:数据生产

任务描述 电信数据生产是一个完整且严密的体系&#xff0c;这样可以保证数据的鲁棒性。在本项目的数据生产模块中&#xff0c;我们来模拟生产一些电信数据。同时&#xff0c;我们必须清楚电信数据的格式和数据结构&#xff0c;这样才能在后续的数据产生、存储、分析和展示环节…

【观察】三合实业X华为:十载风雨同舟路,奋楫逐浪向未来

十年前&#xff0c;广东三合电子实业有限公司&#xff08;以下简称&#xff1a;三合实业&#xff09;正式成立&#xff0c;同年成为华为金牌伙伴&#xff0c;由此也开启了与华为深度“结缘”的十年。 十年来&#xff0c;作为华为“铁杆”的合作伙伴&#xff0c;三合实业始终与华…