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

王小婷

发布于 2020-07-01 10:42:00

5750

发布于 2020-07-01 10:42:00

前后端交互的时候，后端经常会返回一些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           
        }]
    }
}

显示如下：