vue入门学习之过滤器的使用

说明：

记录vue中如何使用过滤器，局部配置和全局配置及注意事项

 039_尚硅谷Vue技术_过滤器_哔哩哔哩_bilibili

<div>
  ###使用插值语法实现时间戳显示
   <h1>{{time}}<h1>
</div>



const vm = new Vue({
   data:{
      time:'1665733169207'
   }  
})

案例：时间戳1665733169207字符串的格式化

日期格式化工具第三方库BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 

moment.js 和 精简版dayjs

方法一：使用插值语法+函数 实现时间戳的格式化

<div>
  ###使用函数语法实现时间戳的格式化
   <h1>{{fmttime()}}<h1>
</div>



const vm = new Vue({
   data:{
      time:'1665733169207'
   },
 methods:{
      fmttime(){
        return dayjs(this.time).format('YYYY-MM-DD hh:mm:ss')
   }
  } 
})

方法二：使用插值语法+计算属性 实现时间戳的格式化

<div>
  ###使用计算属性语法实现时间戳的格式化
   <h1>{{fmttime}}<h1>
</div>


const vm = new Vue({
   data:{
      time:'1665733169207'
   },
computed:{
    fmttime(){
         return dayjs().formater('YYYY-MM-DD hh:mm:ss');
       }
    }
  } 
})

方法三：使用插值语法+过滤器 实现时间戳的格式化

 局部过滤器不传参数

默认管道符前面的参数就是过滤器的第一个入参

<div>
  ###使用插值语法加管道符语法实现过滤器时间戳的格式化
   <h1>{{time | timeformater}}<h1>
</div>


const vm = new Vue({
   data:{
      time:'1665733169207'
   },
  filters:{
      timeformater(value){
        return dayjs(value).formater('YYYY-MM-DD hh:mm:ss');
      }
    }
  } 
})

 局部过滤器传参数

<div>
  ###使用插值语法加管道符语法实现过滤器时间戳的格式化
   <h1>{{time | timeformater('YYYY-MM-DD')}| scliceTime()}<h1>
</div>


const vm = new Vue({
   data:{
      time:'1665733169207'
   },
  filters:{
      timeformater(value,str='YYYY-MM-DD hh:mm:ss'){
        return dayjs(value).formater(str);
      },
     scliceTime(val){
       return val.slice(0,4)
      }
    }
  } 
})

注意：

1)这里为了通用性（参数可传，可不传情况正常格式化）在过滤器第二个参数添加默认格式化

当传自定义格式化时，使用自定义的，当不传参数时使用默认的

2)过滤器可以添加多个，按照先后顺序过滤，前面过滤的结果，作为后面过滤器入参，最终结果替换插值语法中的内容

全局过滤器

Vue.filter('注册过滤器名称'，function(value){逻辑处理过程})

<div>
  ###使用插值语法加管道符语法实现过滤器时间戳的格式化
   <h1>{{time | timeformater('YYYY-MM-DD')}| scliceTime}<h1>
</div>



Vue.filter('scliceTime',function(value){
       return val.slice(0,4)
})
const vm = new Vue({
   data:{
      time:'1665733169207'
   },
  filters:{
      timeformater(value,str='YYYY-MM-DD hh:mm:ss'){
        return dayjs(value).formater(str);
      }
   
    }
  } 
})