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