Vue过滤器 filter

admin 发布于 VUE

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

例如: 

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

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

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

过滤器分类:全局过滤器和局部(组件)过滤器

1、全局过滤器
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) }}
filterA的第一个参数是message,依次是‘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;
    }
   }
}

130浏览量 · 0评论 · 2019-08-08 10:03:18

全部评论  0

注册登录 进行评论

热门专题

更多专题