vue 过滤器(filter)的使用

| 符号前面是过滤器的传参，后面是过滤器的返回值。

使用方式：

<!-- 在双花括号中 -->
<div>{{ message | formatDate }}</div>
 
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatDate"></div>

很多时候，后台返回给我的列表数据中，时间这一个字段是时间戳。我们要将时间戳转化为日期格式显示给用户，通过我们用普通的方式，循环这个数组，将每一项的时间戳转换为具体的日期格式，而vue提供的过滤器可以帮我们很好的解决这种问题。

首先定义过滤器有两种方式，第一种是全局过滤器，我们可以直接在vue对象上使用filter方法注册过滤器，这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使用，接下来我们使用这两种方式注册过滤器函数。

全局过滤器：

import Vue from 'vue';
Vue.filter('formatTime', function (val) {
  const date = new Date(val);
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${hour} : ${minutes} : ${seconds}`;
});

局部组件过滤器：

export default {
    /* 局部过滤器 */
    filters: {
      formatDate (val) {
        const date = new Date(val);
        const year = date.getFullYear();
        const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
        const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
        return `${year}-${month}-${day}`;
      }
    }
    
  }

或者把 formatDate 方法写的工具栏中，直接引入使用。

import { formatDate  } from '@/utils/utils';

export default {
  filters: {
    formatDate(time) {
      return formatDate(time)
    }
  }
}

---

20210219 更新内容~~

对于枚举值，有时候我们需要将 value 对应的 label 显示处理，需要转换一下，就可以使用 filter 过滤器来实现。

  import Vue from 'vue'

  Vue.filter('enumeration', function (data, format) {
    // 根据value ==> label
    const filterValueData = format.filter(item => {
      return item['value'] === data
    })
    if (filterValueData[0]) {
      return filterValueData[0]['label']
    } else {
      return ''
    }
  })

如何使用呢？

// capacityPoolData.vehicleTypeData 为枚举源数据
// data.vehicleType 为枚举值
<span>{{ data.vehicleType | enumeration(capacityPoolData.vehicleTypeData) }}</span>