过滤器或者三目
接口返回的数据不一定是呈现在页面上的样子,比如说:有一个字段叫状态,服务器保存的是数字(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';
});