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

后台返回的数据

显示效果:

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 = ["", "跳乐乐小程序", "竞赛车小程序", "室外小程序"];
相关推荐
二十雨辰4 分钟前
[JS]面向对象ES6
前端·javascript·ajax
GDAL5 分钟前
css之transform-origin
前端·css
疯狂创作者7 分钟前
十款绚丽的前端 CSS 菜单导航动画
前端·css
秃头女孩y30 分钟前
前端之CSS篇--面试题总结
前端·css
2402_8575834931 分钟前
定制化的 CSS 魔法:WebKit 处理 CSS 变量的深度解析
前端·css·webkit
椰果uu33 分钟前
实习手记(2):前端菜鸟的摸鱼与成长
前端·前端实习
一只理智恩38 分钟前
React中的useCallback
前端·javascript·react.js
@PHARAOH39 分钟前
HOW - React Router v6.x Feature 实践(react-router-dom)
前端·react.js·前端框架
林强18142 分钟前
React Redux使用@reduxjs/toolkit的hooks
前端·javascript·react.js
不掉头发的程序猿宝宝1 小时前
Node.js_fs模块
前端