Vue中的过滤器filter

一、Vue中的过滤器如何用

{{ message | filter }}

// 语法：

  
{{userName | addName}}

// 参数一：是过滤器的名字，也就是管道符后边的处理函数；

// 参数二：处理函数，处理函数的参数同上

二、过滤器可以串联

{{ message | filterA | filterB }}

filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

三、过滤器是 JavaScript 函数可以接收参数

{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

四、Vue中的过滤器应用场景 

比如单位转换、数字打点、文本格式化、时间格式化之类

场景一：格式日期（时间）后端传的时间：2019-11-19T04:32:46Z 处理成 2019-11-19 12:11.00

// main.js

import moment from 'moment'
// 定义全局过滤器--时间格式化
Vue.filter('format',function(val,arg){
  if(!val) return;
  val = val.toString()
  return moment(val).format(arg)
})

// test.vue

场景二：后端返回的是数字，前端需要把数字过滤成数字对应的标识以及对应的样式

// orderData.js  数据

export default [
    {
        orderId: 1,
        name: '商品1',
        price: 20000,
        status: 1,
    },
    {
        orderId: 2,
        name: '商品2',
        price: 30000,
        status: 2,
    },
    {
        orderId: 3,
        name: '商品3',
        price: 40000,
        status: 3,
    },
    {
        orderId: 4,
        name: '商品4',
        price: 50000,
        status: 4,
    },
    {
        orderId: 5,
        name: '商品5',
        price: 6000,
        status: 5,
    }
]

// orderStatus.js filter 处里函数

export default {
  setOrderStatus(status) {// 判断数字对应的标识
    switch (status) {
      case 1:
        return '待付款';
      case 2:
        return '待发货';
      case 3:
        return '待评价';
      case 4:
        return '待收货';
      default:
        return '获取不到状态'
    }
  },
  setStatusStyle(statusString) {// 判断对应标识的class样式
    switch (statusString) {
      case '待付款':
        return 'not-pay';
      case '待发货':
        return 'not-send';
      case '待评价':
        return 'not-recrive';
      case '待收货':
        return 'not-comment';
      default:
        return 'not-defalit'
    }
  }
}