- 自定义过滤器
html部分
<div class="item-inner">
<div class="item-title">支付方式:</div>
<div>{{item.paymentMethod | paymentMethod}}</div>
</div>
js部分
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
paymentMethod: function (value) {
switch (value) {
case 1:
return '微信支付'
case 2:
return '钱包支付'
default:
return '其他'
}
}
}
})
- 全局过滤器
1、首先在src目录下新建一个filters文件夹并在文件夹里面新建index.js文件存放过滤器方法
2、在index.js中写全局过滤器方法
import Vue from 'vue'
//个人中心-支付状态
Vue.filter('paymentMethod', value => {
switch (value) {
case 1:
return '微信支付'
case 2:
return '会员充值'
case 3:
return '钱包支付'
default:
return '其他'
}
})
//服务订单列表状态提示
Vue.filter('server_orderStatus', value => {
switch (value) {
case 0:
return '待评估'
case 1:
return '待支付'
case 2:
return '待服务'
case 3:
return '待评价'
case 4:
return '已完成'
default:
return ''
}
})
3、在main.js中全局引入过滤器
4、在需要使用过滤器的页面直接使用即可
<div class="item-inner">
<div class="item-title">支付方式:</div>
<div>{{item.paymentMethod | paymentMethod}}</div>
</div>