Vue.js接口返回不同的状态值，动态展示不同的状态文案

最新推荐文章于 2023-06-14 18:39:32 发布

原创最新推荐文章于 2023-06-14 18:39:32 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种根据接口返回的状态值映射成相应状态文案的方法。通过使用switch语句，针对不同的状态值返回对应的文案描述，例如“已上线”、“已下线”等。这种方法可以清晰地展示业务场景中各种状态的含义。

在业务场景中，接口返回的状态值是不确定的，但是是在一定的范围内，将不同状态值对应的不同状态文案展示出来。
接口数据如下：

{
	show_status:1
}

不同的状态值，对应不同的状态文案
1：已上线
2：已下线
3：已成功
4：已停售
5：已购买

 <div class="class_status_check_text">
     {{ getTextByStatus(item.show_status) }}
 </div>

methods:{
 getTextByStatus (status) {
      switch (status) {
        case 1:
          return '已上线'
        case 2:
          return '已下线'
        case 3:
          return '已成功'
        case 4:
          return '已停售'
        case 5:
          return '已购买'
      }
    }
   }