Vue过滤器 filter

简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。 

例如： 

1、后台给的时间格式是时间戳，如果需要显示正常时间，就需要通过过滤器把时间戳转为正常格式；

2、价格需要在前面加￥或＄时可以通过过滤器的方式实现

3、小数点保留可以通过过滤器的方式

过滤器分类：全局过滤器和局部（组件）过滤器

Vue.filter('globalFilter', function (value) {
  return value + "!!!"
})

2、局部过滤器

filters:{
    componentFilter:function(value){
        return value + "!!!"
    }
  },

3、使用方式

      （1）在双花括号插值 

{{ '变量名称' | globalFilter }}

       ( 2 ) 在v-bind表达式中使用 

<div v-bind:data="'ok' | globalFilter" ></div>

过滤器带参数

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

<div>{{'2018'|filterA('07','17')}}</div>

filters:{
    filterA(value,arg1,arg2){
        return value+'-'+arg1+'-'+arg2;
    }
  },

结果：2018-07-17

实例1：保留两位小数点

<div>{{'2018'|decimal(2)}}</div>

过滤器 

filters:{
    decimal(value,num){
        //先转数字类型，字符串没有toFixed函数
        return Number（value）.toFixed(num); 
    }
  },

实例2：添加金额符号

<div>{{'100'|money(‘￥’)}}</div>

  过滤器

filters:{
    decimal(value,str){
        //先转数字类型，字符串没有toFixed函数
        return str+value; 
    }
  },

可以通过多个参数实现保留两位小数点的同时添加金额符号

实例3：根据时间戳获取时间

  <div class="number-item">默认:输出完整时间：'YYYY-MM-DD h:m:s'</div >
  <div class="number-item">{{‘1558662393’|timeFormat}}</div >
  <div  class="number-item">输出年-月-日：'YYYY-MM-DD'</div >
  <div class="number-item">{{‘1558662393’|timeFormat('YYYY-MM-DD')}}</div >
  <div class="number-item">输出月-日：'MM-DD'</div >
  <div  class="number-item">{{‘1558662393’|timeFormat('MM-DD')}}</div >
  <div class="number-item">输出月-日 星期：'MM-DD WEEK'</div >
  <div class="number-item">{{‘1558662393’|timeFormat('MM-DD WEEK')}}</div >

过滤器

filters：{ 
  timeFormat:function(arg,type='YYYY-MM-DD h:m:s'){
    if(arg.toString().length==10){
     arg=arg*1000;
     //如果date为13位不需要乘1000
     //[js时间戳长度是13位]，php，java等时间戳长度为10位
    }
    var date = new Date(arg)
    var year = date.getFullYear();//获取年
    var mouth = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);//月
    var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());//日
    var hour= (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());//时
    var minute = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());//分
    var second = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());//秒
    var week;//星期
    if(date.getDay() == 0) week = "星期日"
    if(date.getDay() == 1) week = "星期一"
    if(date.getDay() == 2) week = "星期二"
    if(date.getDay() == 3) week = "星期三"
    if(date.getDay() == 4) week = "星期四"
    if(date.getDay() == 5) week = "星期五"
    if(date.getDay() == 6) week = "星期六"
    if(type=='YYYY-MM-DD h:m:s'){
        return year+'-'+mouth+'-'+day+' '+hour+':'+minute+':'+second;
    }
    if(type=='YYYY-MM-DD'){
       return year+'-'+mouth+'-'+day;
    }
    if(type=='MM-DD'){
      return mouth+'-'+day;
    }
    if(type=='MM-DD WEEK'){
     return mouth+'-'+day+' '+week;
    }
   }
}