【Vue】过滤器

其实对过滤器这个名字，我是有疑问的，因为感觉项目中使用过滤器多数都是在格式化，而且本身根据Vue官方文档说明也是只能用于双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)，这与语义不符感觉不如叫做格式化器。

废话不多说，本文主要讲的是Vue单页面应用程序中的私有过滤器以及全局过滤器的使用。两个程序都是以格式化时间作为案例。

私有过滤器：

定义含有两个参数的过滤器 timeFilter 第一个参数就是 | 管道前的值，第二个参数就是过滤器本身带有的参数（"yyyy-MM-dd hh:mm:ss"）。（ps：这里要注意一下一个参数，传入过滤器时已经不是Date类型，已经被转为string，这里有需要的可能要做特殊处理）

<template>
    <div>
      {{new Date()|timeFilter("yyyy-MM-dd hh:mm:ss")}}
    </div>
</template>

<script>
    export default {
        name: "Vue02",
        filters:{
            timeFilter(value,fmt){
                if(typeof(value)=='string'){
                    value=new Date(value);
                }
                var o = {
                    "M+" : value.getMonth()+1,                 //月份
                    "d+" : value.getDate(),                    //日
                    "h+" : value.getHours(),                   //小时
                    "m+" : value.getMinutes(),                 //分
                    "s+" : value.getSeconds(),                 //秒
                    "q+" : Math.floor((value.getMonth()+3)/3), //季度
                    "S"  : value.getMilliseconds()             //毫秒
                };
                if(/(y+)/.test(fmt))
                    fmt=fmt.replace(RegExp.$1, (value.getFullYear()+"").substr(4 - RegExp.$1.length));
                for(var k in o)
                    if(new RegExp("("+ k +")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                return fmt;
            }
        }
    }
</script>

多过滤器一起使用：

如果多过滤器一起使用，后面的过滤器接受到的就是前面过滤器处理后的值。

<template>
    <div>
      {{new Date()|timeFilter("yyyy-MM-dd hh:mm:ss")|testFilter}}
    </div>
</template>

<script>
    export default {
        name: "Vue02",
        filters:{
            timeFilter(value,fmt){
                if(typeof(value)=='string'){
                    value=new Date(value);
                }
                var o = {
                    "M+" : value.getMonth()+1,                 //月份
                    "d+" : value.getDate(),                    //日
                    "h+" : value.getHours(),                   //小时
                    "m+" : value.getMinutes(),                 //分
                    "s+" : value.getSeconds(),                 //秒
                    "q+" : Math.floor((value.getMonth()+3)/3), //季度
                    "S"  : value.getMilliseconds()             //毫秒
                };
                if(/(y+)/.test(fmt))
                    fmt=fmt.replace(RegExp.$1, (value.getFullYear()+"").substr(4 - RegExp.$1.length));
                for(var k in o)
                    if(new RegExp("("+ k +")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                return fmt;
            },
            testFilter(value){
                return value+"  测试";
            }
        }
    }
</script>

<style scoped>

</style>

全局过滤器：

先在src目录下简历filter文件夹，在filter文件夹下简历index.js文件。

/**
 * 全局过滤器
 */
const filters={
  /**
   * 时间过滤器
   * @param value 时间
   * @param fmt  格式 yyyy-MM-dd hh:mm:ss
   * @returns {*}
   */
  dateFormat:(value,fmt)=>{
    if(typeof(value)=='string'){
      value=new Date(value);
    }
    var o = {
      "M+" : value.getMonth()+1,                 //月份
      "d+" : value.getDate(),                    //日
      "h+" : value.getHours(),                   //小时
      "m+" : value.getMinutes(),                 //分
      "s+" : value.getSeconds(),                 //秒
      "q+" : Math.floor((value.getMonth()+3)/3), //季度
      "S"  : value.getMilliseconds()             //毫秒
    };
    if(/(y+)/.test(fmt))
      fmt=fmt.replace(RegExp.$1, (value.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
      if(new RegExp("("+ k +")").test(fmt))
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    return fmt;
  }
}
export default filters;

在main.js中加入全局声明中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import filters from "./filter";

Vue.config.productionTip = false

for (let key in filters) {
  Vue.filter(key, filters[key]);
}

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在Vue文件中使用

<template>
    <div>
      {{new Date()|dateFormat("yyyy-MM-dd hh:mm:ss")}}
    </div>
</template>