【vue filters 过滤器】vue页面 全局使用

本文主要是介绍【vue filters 过滤器】vue页面 全局使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【vue filters 过滤器】vue页面 全局使用

1、在根目录common文件下创建filters.

// 全局 过滤器
export const filters = {// "订单状态 1待接单 2配送中 3已送达 4已完成 -1已取消") orderStatus;orderStatus: val => {let result = nullswitch (val) {case 0:return (result = '未支付')breakcase -1:return (result = '已取消')breakcase 1:return (result = '待接单')breakcase 2:return (result = '配送中')breakcase 3:return (result = '已送达')breakcase 4:return (result = '已完成')break}return result},// 接着下一个过滤器}

2、在main.js引入和注册全局

import { filters } from './common/filters.js'
// 定义全局自定义过滤器
Object.keys(filters).forEach(key => {Vue.filter(key, filters[key])
})

3、页面使用

{{ item.status | orderStatus}}

这篇关于【vue filters 过滤器】vue页面 全局使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---