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;
    });

過濾後