Vue中的过滤器

过滤器

• vue 1.x内部提供提供了 10 个过滤器， 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化

1. 什么叫过滤器？
   格式化数据的一个工具
   举例：

   • 12.22225 —> 12.2
   • Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28

2. 过滤器一样也有两种声明形式

   • 全局声明
     Vue.filter(过滤器名称，回调函数) 回调函数中有一个参数value
     value值就表示的是格式化数据的值
   • 局部声明

          new Vue({
            filters: {
              '过滤器名称'： function( value ){
                return
              }
            }
          })
   

   • 过滤器的回调函数必须有返回值

   • 如何使用使用过滤器？
     我们用一个叫做管道符的来使用过滤器

   • 举例：数据 | 过滤器名称

<div id="app">
    <p> {{ time | date('*') }} </p>
    <p> {{ time | time('/') }} </p>
  </div>

  // 全局声明

  Vue.filter( 'date', function ( val,type ) {
    var date = new Date( val )
    return `${ date.getFullYear()} ${ type } ${ date.getMonth() + 1 } ${ type } ${ date.getDate() }`
  })

  new Vue({
    el: '#app',
    data: {
      time: Date.now()
    },
    // 局部声明
    filters: {
      'time': function( val,type ){
        var date = new Date( val )
        return `${ date.getFullYear()} ${ type } ${ date.getMonth() + 1 } ${ type } ${ date.getDate() }`
      }
    }
  })