vue使用过滤器格式化字符串

项目需求

从数据库中读取的性别字符0=男，1=女，2=未知，现在我们要把这些0、1、2转换成男、女、未知并展现到网页上，此时就需要使用vue的过滤器对字符串进行格式化

一、vue对象中添加filters属性

二、在filters属性中添加格式化性别的过滤器sexFilter函数

filters:{ //自定义过滤器
    sexFilter: function (value) { //格式化性别字符串
        switch (value) {
            case 0:
                return '男';
            case 1:
                return '女';
            default:
                return '未知';
        }
    }
},

三、表格中格式化用户的性别

四、参考代码

网页代码

<tbody>
    <tr v-for="u in users">
        <td>{{u.id}}</td>
        <td>{{u.userName}}</td>
        <td>{{u.nickName}}</td>
        <td>{{u.sex | sexFilter}}</td>
        <td>{{u.birth}}</td>
        <td>{{u.phone}}</td>
        <td><img :src="u.img" style="width: 100px; height: 100px"/></td>
        <td>
            <button class="btn btn-link" @click="doUpdate(u.id)">修改</button>
            <button class="btn btn-link" @click="doDelete(u.id)">删除</button>
        </td>
    </tr>
</tbody>

vue代码

new Vue({
    el: '#app',
    data: {
        users: null
    },
    filters:{ //自定义过滤器
        sexFilter: function (value) { //格式化性别字符串
            switch (value) {
                case 0:
                    return '男';
                case 1:
                    return '女';
                default:
                    return '未知';
            }
        }
    }
});
             return '未知';
            }
        }
    }
});