Vue.js全局API——filter

情景

将后台存的数字订单状态格式化显示在前端

使用filter

新建filters文件

order.js 写处理订单的filter方法

export default {
  setOrderStatus (status) {
    switch (status) {
      case 1:
        return '待付款'
        
      case 2:
        return '待发货'
        
      case 3:
        return '待收货'
        
      case 4:
        return '待评价'
        
      default:
        return '未获取到状态'   
    }
  },
  setStatusStyle (status) {
    if (status === '未获取到状态') {
      return 'red'
  }
  }
}

index.js 将filter导出

import orders from './orders'
export default {
 ...orders
}

在main.js中全局注册使用

import filters from '@/plugins/filters'

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

页面中使用

  
    过滤器使用
    {{ 1 | setOrderStatus}}
     
      
        {{text | setOrderStatus}}
      
     
  

table.js

export default [
  {
    name: '商品1',
    order: '546645',
    price: 1111,
    status: 1,
    rote: 0.5
  },
  {
    name: '商品1',
    order: '546456',
    price: 4545,
    status: 2,
    rote: 0.6
  },
  {
    name: '商品1',
    order: '4564645',
    price: 1111,
    status: 3,
    rote: 0.3
  },
  {
    name: '商品1',
    order: '6456456',
    price: 1222,
    status: 4,
    rote: 0.2
  },
  {
    name: '商品1',
    order: '45646564',
    price: 4545,
    status: null,
    rote: 0.8
  },
]

效果

总结 功能

主要用于格式化文本

使用 注册方式 在组件的选项中定义在创建Vue.js实例之前全局定义（以上Demo） 使用方式 用于双括号插值和v-bind表达式（2.1.0+开始），应该被添加在js表达式的尾部，由管道符号指示可以串联并且接受参数

{{mes | filter(agrs1, agrs2)}}
// mes 会作为第一个参数，agrs1作为第二个，agrs作为第三个 

原理《深入浅出Vue.js》

filters是个对象，自定义的过滤器以名称和函数为键值存于filters

在编译阶段将过滤器编译成函数调用，串联的过滤器编译后是一个嵌套的函数调用，前一个过滤器的执行结果是最后一个过滤器函数的参数编译后的_f函数是resolveFilter函数的别名，resolveFilter函数的作用是找到对应的过滤器并返回编译过滤器的过程分两歩：解析和resolveFilter