uniapp格式化渲染性别,状态,等级

前后端交互的时候,后端经常会返回一些int类型的返回值,这个时候前端需要对这种数据类型进行一些处理,渲染在界面上。

比如性别

 “sex”:XXX,//int,性别 0表示女 1表示男,

比如状态:

“status”:XXX,//int,作业状态   0:待审批  1:已同意 -1:未同意

比如等级

"level": xxx  //int型,级别,0表示优秀 ,1表示良好,2表示中等,3表示较差

这里就需要用到filters过滤的方法,时间戳的处理其实和jquery里面用到的是一样的。

参考代码

<template>
    <view>
        <view class="padding-xl" v-for="(item,index) in fenecList.fences" :key="index">
            <text>性别:{{item.sex | formatSex}} </text>
            <text>状态:{{item.status | formatStatus}} </text>
            <text>等级:{{item.level | formatLevel}}</text>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                fenecList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                uni.request({
                    url: "../../static/test.json",
                    method: 'get',
                    dataType: 'json',
                    success: (res) => {
                        console.log(res.data);
                        this.fenecList = res.data.info;
                    },
                });
            },
        },

        filters: {
            // 格式化性别
            formatSex: function(str) {
                const sexEnum = {
                    "0": "女",
                    "1": "男",
                }
                return sexEnum[str];
            },
            // 格式化状态
            formatStatus: function(str) {
                const statusEnum = {
                    "0": "待审批 ",
                    "1": "已同意",
                    "-1": "未同意",

                }
                return statusEnum[str];
            },
            // 格式化等级
            formatLevel: function(str) {
                const LevelEnum = {
                    "0": "优秀",
                    "1": "良好",
                    "2": "中等",
                    "3": "差劲",
                }
                return LevelEnum[str];
            }
        },
    }
</script>
<style>

</style>

test.json




{
    "retCode": 1,   
    "info": {       
        "configName": "家庭作业",       
        "fences": [{
            "sex": 1,
            "status": 0,
            "level": 1       
        },{
            "sex": 0, 
            "status": 1,
            "level": 1            
        },{
            "sex": 1, 
            "status": 0,
            "level": 1            
        },{
            "sex": 0, 
            "status": -1,
            "level": 0           
        }]
    }
}

显示如下:


©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值