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                   }]    }}

显示如下：