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

 更新时间:2022年10月25日 10:25:21   作者:small面包  
这篇文章主要介绍了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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中获取图片高度的两种方法

    Vue中获取图片高度的两种方法

    在使用Vue2开发移动端页面的时候,需要做一个效果,实现的方案是背景渐变,但是想要实现这个效果就必须进行定位,我的背景高度需要在一个十分恰当的位置,但是我的图片会随着移动端页面的变化而发生高度的变化,为什么会变化?所以本文介绍了Vue中获取图片高度的方法
    2024-08-08
  • VUE v-for中的:key详解

    VUE v-for中的:key详解

    这篇文章主要为大家介绍了v-for中的:key,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vuex新手进阶篇之改变state mutations的使用

    vuex新手进阶篇之改变state mutations的使用

    在vue的项目中不可避免的会使用到vuex用于数据的存储,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之改变state mutations的使用,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Vue3手动清理keep-alive组件缓存的方法详解

    Vue3手动清理keep-alive组件缓存的方法详解

    这篇文章主要为大家详细介绍了Vue3中手动清理keep-alive组件缓存的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • vue使用axios接收流文件的实现

    vue使用axios接收流文件的实现

    本文主要介绍了vue使用axios接收流文件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue密码登陆加密RSA实现方案

    Vue密码登陆加密RSA实现方案

    这篇文章主要介绍了Vue密码登陆加密RSA实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue.js将时间戳转化为日期格式的实现代码

    vue.js将时间戳转化为日期格式的实现代码

    这篇文章主要介绍了vue.js将时间戳转化为日期格式的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue3 ref和reactive的区别解析

    vue3 ref和reactive的区别解析

    这篇文章主要介绍了在Vue3中,ref用于创建简单数据的响应式包装,通过.value访问和修改;reactive用于创建复杂对象的响应式对象,可以直接访问和修改属性,两者各有适用场景,ref更适合单个值,reactive更适合复杂对象,本文介绍vue3 ref和reactive区别,感兴趣的朋友一起看看吧
    2025-02-02
  • vue使用element-ui按需引入时踩过的那些坑

    vue使用element-ui按需引入时踩过的那些坑

    Element-UI是基于vue实现的一套不依赖业务的UI组件库,提供了丰富的PC端组件,减少用户对常用组件的封装,降低了开发的难易程度,下面这篇文章主要给大家介绍了关于vue使用element-ui按需引入时踩过的那些坑,需要的朋友可以参考下
    2022-05-05
  • swiper在vue中的简单使用方法

    swiper在vue中的简单使用方法

    Swiper常用于移动端网站的内容触摸滑动,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,下面这篇文章主要给大家介绍了关于swiper在vue中的简单使用方法,需要的朋友可以参考下
    2022-09-09

最新评论