Vue模板中如何将整数状态转换为对应字符串显示？

这里提供几种简洁的实现方式，根据你的场景选择即可：

方法一：模板内直接使用对象映射（最简便） #

适合状态类型较少、无需额外逻辑的场景，直接通过对象键值对映射状态文字：

1. 在组件的data中定义状态映射对象：

data() {
  return {
    depAccs: [], // 你的数据源
    statusMap: {
      0: 'Deleted',
      1: 'Active',
      2: 'Completed'
    }
  }
}

2. 修改模板中的状态列：

<tr v-for="(depAcc, index) in depAccs" :key="index">
  <td>{{ index + 1 }}</td>
  <td>{{ depAcc.created_at }}</td>
  <td>{{ depAcc.name }}</td>
  <td>{{ statusMap[depAcc.status] }}</td>
</tr>

方法二：使用计算属性（适合复用或复杂逻辑） #

如果需要对状态做额外处理，或在多个地方复用转换逻辑，用计算属性预处理数据源：

computed: {
  formattedDepAccs() {
    return this.depAccs.map(item => {
      const statusMap = {
        0: 'Deleted',
        1: 'Active',
        2: 'Completed'
      }
      return {
        ...item,
        statusText: statusMap[item.status]
      }
    })
  }
}

修改模板遍历计算后的数组：

<tr v-for="(depAcc, index) in formattedDepAccs" :key="index">
  <td>{{ index + 1 }}</td>
  <td>{{ depAcc.created_at }}</td>
  <td>{{ depAcc.name }}</td>
  <td>{{ depAcc.statusText }}</td>
</tr>

方法三：使用方法（灵活处理单个状态） #

定义专门的状态转换方法，适合需要动态调整转换逻辑的场景：

methods: {
  getStatusText(status) {
    switch(status) {
      case 0: return 'Deleted'
      case 1: return 'Active'
      case 2: return 'Completed'
      default: return 'Unknown' // 处理未定义的状态值
    }
  }
}

模板中调用方法：

<tr v-for="(depAcc, index) in depAccs" :key="index">
  <td>{{ index + 1 }}</td>
  <td>{{ depAcc.created_at }}</td>
  <td>{{ depAcc.name }}</td>
  <td>{{ getStatusText(depAcc.status) }}</td>
</tr>

内容的提问来源于stack exchange，提问作者Udayanga Amarasinghe