vue 綁定數據-過濾器

過濾器或者三目

接口返回的數據不一定是呈現在頁面上的樣子，比如說：有一個字段叫狀態，服務器保存的是數字（1-審覈，2-審覈不通過，0或者null是未審覈，）

1.服務器直接做好判斷返回，前端就不用改了

2.返回的數字，在綁定數據的時候使用三目，如：<td>{{quote.isvalid==1?"已審覈":(quote.isvalid==0?"未審覈":"不通過")}}</td>

3.較爲複雜的時候就可以使用過濾器

過濾器

過濾器可以用在兩個地方，插值和v-bind表達式。有全局過濾器和局部過濾器。
當有兩個名稱相同的局部過濾和全局過濾的時候會先調用局部。

{{quote.isvalid|GetStatus()}}

//獲取列表
        new Vue({
            el: '#QouteListTable',
            data: { list: null },
            mounted() {
                var self = this;
                axios
                    .get('http://***/api/QuotePrice', {
                        headers: { "Authorization": "***" },
                        responseType: "json", // 默認的
                    })
                    .then(function (response) {
                        if (response.data.code == 0) {
                            self.list = response.data.data;
                        }
                    })
                    .catch(function (error) { // 請求失敗處理
                        console.log(error);
                    });
            }, filters: {
                GetStatus(status) {
                    switch (status) {

                        case 0:
                            return "未審覈";
                            break;
                        case 1:
                            return "已審覈";
                            break;
                        case 2:
                            return "不通過";
                            break;
                        default:
                            return "已審覈";
                            break;
                    }
                }
            }
        })

2.全局過濾器

// 1. 定義全局過濾器
    Vue.filter('moneyFormat', (money)=>{
        return '¥' + money + '.000';
    });