阶段二-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>
<!--                            <button class="btn btn-link" @click="<doUpdate(u.id)>">修改</button>-->
<!--                            用户修改并传递参数-->
                            <router-link :to="'user_update?id='+u.id"><button class="btn btn-link">修改</button></router-link>
                            <button class="btn btn-link" @click="doDelete(u.id)">删除</button>
                        </td>
                    </tr>
                    </tbody>

vue代码

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