前端如何在接口返回字符串类型的数值转化在浏览器中转化为对应文字并且逗号隔开

一，问题

后端接口中返回字符串类型的数值如何转化在浏览器中转化为对应文字用逗号隔开
0代表微信 1代表QQ 2代表邮件 3代表语音

---

二，方法

第一步：假设后端返回的数据

      // 假设是后端返回的数据
      typeData: [
        {
          enableTypes: "0,1",
          id: "100001",
          user: "张三",
        },
        {
          enableTypes: "1,2",
          id: "100002",
          user: "李四",
        },
        {
          enableTypes: "2,3",
          id: "100003",
          user: "王五",
        },
        {
          enableTypes: "0,3",
          id: "100004",
          user: "赵六",
        },
      ],

第二步：映射类型 定义一个数组

 // 映射
      typeMap: [
        {
          value: "微信",
          type: 0,
        },
        {
          value: "QQ",
          type: 1,
        },
        {
          value: "邮箱",
          type: 2,
        },
        {
          value: "语音",
          type: 3,
        },
      ],

第三步：数据处理写在计算属性里

 // 计算属性
  computed: {
    getTypeData() {
      console.log(444);
      return (str) => {
        return String(str.split(",").map((item) => this.typeMap[item].value));
      };
    },
  }

第四步：模板展示

<template>
  <div class="home">
    <table class="pure-table pure-table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>信息类型</th>
        </tr>
      </thead>

      <tbody v-for="(item, index) in typeData" :key="index">
        <tr>
          <td>{
   
   { item.id }}</td>
          <!-- <td>{
   
   { item.enableTypes}}</td> -->
          <td>{
   
   { getTypeData(item.enableTypes) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

第五步：测试结果

处理前

处理后

---

三，完整测试代码

<template>
  <div class="home">
    <table class="pure-table pure-table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>信息类型</th>
        </tr>
      </thead>

      <tbody v-for="(item, index) in typeData" :key="index">
        <tr>
          <td>{
   
   { item.id }}</td>
          <td>{
   
   { item.enableTypes}}</td>
          <!-- <td>{
   
   { getTypeData(item.enableTypes) }}</td> -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  data() {
    return {
      // 假设是后端返回的数据
      typeData: [
        {
          enableTypes: "0,1",
          id: "100001",
          user: "张三",
        },
        {
          enableTypes: "1,2",
          id: "100002",
          user: "李四",
        },
        {
          enableTypes: "2,3",
          id: "100003",
          user: "王五",
        },
        {
          enableTypes: "0,3",
          id: "100004",
          user: "赵六",
        },
      ],
      // 映射
      typeMap: [
        {
          value: "微信",
          type: 0,
        },
        {
          value: "QQ",
          type: 1,
        },
        {
          value: "邮箱",
          type: 2,
        },
        {
          value: "语音",
          type: 3,
        },
      ],
    };
  },
  // 计算属性
  computed: {
    getTypeData() {
      console.log(444);
      return (str) => {
        return String(str.split(",").map((item) => this.typeMap[item].value));
      };
    },
  },
};
</script>
<style scoped>
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 10px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
tr {
  border-bottom: 1px solid #cbcbcb;
}
td,
th {
  padding: 0;
}

.pure-table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
}

.pure-table caption {
  color: #000;
  font: italic 85%/1 arial, sans-serif;
  padding: 1em 0;
  text-align: center;
}

.pure-table td,
.pure-table th {
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
  font-size: inherit;
  margin: 0;
  overflow: visible;
  padding: 0.5em 1em;
}

.pure-table thead {
  background-color: #e0e0e0;
  color: #000;
  text-align: left;
  vertical-align: bottom;
}

.pure-table td {
  background-color: transparent;
}
.pure-table-bordered td {
  border-bottom: 1px solid #cbcbcb;
}

.pure-table-bordered tbody > tr:last-child > td {
  border-bottom-width: 0;
}
</style>

---