vue如何将后台返回的数字转换成对应的文字

在 Vue 中，可以通过创建一个映射对象（Map）来将后台返回的数字转换成对应的文字。具体步骤如下：

1. 创建一个映射对象，将数字和文本对应起来：

const statusMap = new Map([
  [0, '未处理'],
  [1, '已处理'],
  [2, '已完成']
]);

这里可以根据具体业务需求来定义映射关系，例如上面的示例中，我们定义了 0 对应 "未处理"，1 对应 "已处理"，2 对应 "已完成"。

1. 在 Vue 组件中，使用计算属性（computed）将后台返回的数字转换成对应的文本：

<template>
  <div>{{ statusText }}</div>
</template>

<script>
export default {
  props: {
    status: {
      type: Number,
      required: true
    }
  },
  computed: {
    statusText() {
      return statusMap.get(this.status);
    }
  }
};
</script>

在上面的示例中，我们定义了一个名为 statusText 的计算属性，该属性通过调用映射对象的 get() 方法，根据 status 属性的值来获取对应的文本。

下面给出一个完整的示例，假设后台返回一个包含多条数据的数组，并且每条数据中都包含一个名为 status 的属性，其值为数字（0、1 或 2），需要将其转换为对应的文字：

const statusMap = new Map([
  [0, '未处理'],
  [1, '已处理'],
  [2, '已完成']
]);

const data = [
  { id: 1, name: '任务1', status: 0 },
  { id: 2, name: '任务2', status: 1 },
  { id: 3, name: '任务3', status: 2 }
];

const result = data.map(item => ({
  ...item,
  statusText: statusMap.get(item.status)
}));

console.log(result);

在上面的示例中，我们使用了 map() 方法遍历了原始数据数组，对于每一项，都新建了一个对象并将其展开，最后将 statusText 属性设置为对应的文字。

请注意，由于 Vue 的计算属性是响应式的，在组件中使用计算属性来实现转换，可以确保在数据发生改变时，视图也会随之改变。