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

一时失言乱红尘 2023-10-11 19:44 33阅读 0赞

**目录**

项目需求

一、vue对象中添加filters属性

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

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

四、参考代码

网页代码

vue代码

--------------------

##  ##

## 项目需求 ##

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

## 一、vue对象中添加filters属性 ##

![a1dca7f0c98a46888c3575b0ae0a1388.png][]

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

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

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

![a76a28132ce84f8f97fb1befa4f94f69.png][]

**注意:中间是或者符号 |**

## 四、参考代码 ##

### 网页代码 ###

<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 '未知';
                }
            }
        }
    });

[a1dca7f0c98a46888c3575b0ae0a1388.png]: https://img-blog.csdnimg.cn/a1dca7f0c98a46888c3575b0ae0a1388.png
[a76a28132ce84f8f97fb1befa4f94f69.png]: https://img-blog.csdnimg.cn/a76a28132ce84f8f97fb1befa4f94f69.png