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

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

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

// 全局 过滤器
export const filters = {
   
	// "订单状态 1待接单 2配送中 3已送达 4已完成 -1已取消") orderStatus;
	orderStatus: val => {
   
		let result = null
		switch (val) {
   
			case 0:
				return (result = '未支付')
				break
			case -1:
				return (result = '已取消')
				break
			case 1:
				return (result = '待接单')
				break
			case 2:
				return (result = '配送中')
				break
			case 3:
				return (result = '已送达')
				break
			case 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}}
 

相关推荐

  1. vue filters 过滤器vue页面 全局使用

    2023-12-17 17:06:02       38 阅读
  2. vue.extend解决vue页面转构造函数暴露js供全局使用

    2023-12-17 17:06:02       6 阅读
  3. GateWay具体的使用全局token过滤器

    2023-12-17 17:06:02       12 阅读
  4. vue如何在服务器端使用过滤器

    2023-12-17 17:06:02       9 阅读
  5. Vue/cli项目全局css使用

    2023-12-17 17:06:02       19 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-17 17:06:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-17 17:06:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-17 17:06:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-17 17:06:02       18 阅读

热门阅读

  1. RK3568-PWM

    2023-12-17 17:06:02       37 阅读
  2. Optee在嵌入式系统中是否支持多线程机制

    2023-12-17 17:06:02       41 阅读
  3. Word Excel模版引擎

    2023-12-17 17:06:02       51 阅读
  4. 设计模式——原型模式代码示例

    2023-12-17 17:06:02       36 阅读
  5. 通过接口引用对象

    2023-12-17 17:06:02       35 阅读
  6. 一句话分清C/C++声明和定义

    2023-12-17 17:06:02       41 阅读
  7. Vue3源码梳理:响应式系统的前世今生

    2023-12-17 17:06:02       35 阅读
  8. 数据库处理与分组存储

    2023-12-17 17:06:02       30 阅读
  9. MySQL数据库的特点、语法、指令...

    2023-12-17 17:06:02       34 阅读
  10. AIGC stable diffusion学习笔记

    2023-12-17 17:06:02       39 阅读
  11. Golang 二分查找 LEETCODE704 小记

    2023-12-17 17:06:02       48 阅读