vue 過濾器 filter 的使用

1.局部過濾器的使用

比如性別，訂單狀態的數據，后端一般返回數字來代替狀態。以性別為模擬數據，0是未知，1是男，2是女。

直接數據渲染出來，只有012，沒有性別

根據后端返回的int類型值，前端對數據進行處理，並渲染在界面上。

在js里，建立一個局部過濾器 filters

 

export default {
    data(){
        return{
            //模擬數據
           sexData: [
                {name: '測試',sex: '0'},
                {name: '測試',sex: '1'},
                {name: '測試',sex: '2'},
            ],
        }
    },
    methods:{},
    //局部過濾器
    filters:{
        formSex(set) {  //formSex過濾器名 set表示要過濾的數據
            const status = {
                "0": "空白",
                "1": "男",
                "2": "女",
            }
            return status[set];
        }
    }
}

使用過濾器

<view v-for='(item,index) in sexData'>
    <text>{{item.name}}</text> ----
    <text>{{item.sex | formSex }}</text>
</view>

在實際開發中，全局的過濾器要比局部過濾器使用的更廣泛一些，說白了我們為什么要使用過濾器，其實就跟使用函數是一樣，把一些方法封裝，供其它組件使用，這樣調用起來更方便也更快捷。

 

2.通過循環來使用過濾器

在時后台返回的數據有多個字段，前端只需要其中一個字段。這時可以使用循環過濾來獲取其中的一個字段。

模擬數據：

data() {
    return {
        //過濾后存放數據
        list: [],
        //過濾前的數據
        listData: [
                {'id': '0','name': '測試','image': '圖片1'},
                {'id': '0','name': '測試1','image': '圖片1'},
                {'id': '1','name': '測試2','image': '圖片1'},
                {'id': '1','name': '測試','image': '圖片1'},
            ]
        }
},

 

使用過濾器循環獲取id為0的數據

//循環過濾id為0的數據
    this.list = this.listData.filter((item, index) => {
        return item.id == 0;
    });

過濾后

 

項目地址：https://gitee.com/jielov/uni-app-tabbar