如何将Vue中后台返回的数字智能转换成对应的文字描述？

本文共计619个文字，预计阅读时间需要3分钟。

目录+将后台返回的数字转换成对应的文字+下面跟大师分享一下我的方法+Vue数字转汉字+效果如图+将后台返回的数字转换成对应的文字+今天遇到一个问题就是性别一栏+后台返回的是数字+我的是如何处理的+是转为汉字男，否转为汉字女+结果如下+男

目录

• 将后台返回的数字转换成对应的文字
• 下面跟大家分享一下我的方法
• vue数字转汉字
• 效果如图

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

今天遇到一个问题就是性别一栏后台返回我的是数字，但是前端展示的是汉字男女，而且0,1,2,对应不同的汉字

下面跟大家分享一下我的方法

首先用map遍历后台返回的数据利用里面的回调对数据进行解析即可，下面直接上代码

        this.usersData.map(function (val) {           if (val.gender == 0) {             val.gender = '人妖'           } else if (val.gender == 1) {             val.gender = '男'           } else if (val.gender == 2) {             val.gender = '女'           } else {             return           }         })

这样就可以直接在页面中显示了~

还有一种方式

<el-table :data="tableData" border>     <el-table-column         prop="status"         :show-overflow-tooltip="true"         label="状态"         width="60"         :formatter="statusFormatter"       >      </el-table-column> </el-table> <script>     export default{         data(){             return{                 tableData:[]             }         },         methods:{             statusFormatter(row, column){                 const status = row.status                   if (status == 0) {                     return '正常'                   } else if (status == 1) {                     return '待审批'                   } else if (status == 2) {                     return '拒绝'                   } else if (status == 3) {                     return '锁定'                   } else {                     return '删除'                   }             }         }     } </script>

vue数字转汉字

Vue中将阿里伯数字转换为中文表示,一般用作排名使用。目前支持两位数字转换。

let toChinese=function(val){ let chin_list=['一','二','三','四','五','六','七','八','九','十'];//所有的数值对应的汉字 let sn = parseInt(val)+1;//这里由于我的后台是从0开始排序 if(sn<=10){ return chin_list[sn-1]; } else if(sn<=100){ if(sn<20) return '十'+chin_list[sn%10-1]; if(sn%10==0) return chin_list[Math.floor(sn/10)-1]+'十'; else return chin_list[Math.floor(sn/10)-1]+'十'+chin_list[sn%10-1]; } else{ //可以支持更多 } }

效果如图

html代码如下

<div v-for="(item,index) in ticketsList" :key="index" class="button-info"> <span class="passenger-title passenger-padding">航段{{ toChinese(index) }}</span> </div>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。