Vue过滤器(局部和全局过滤)

过滤器

1. 什么是过滤器？
   用来格式化数据的一个函数 例如: $ 10 ‘$’ + price 日期的格式化

Vue 1.x 版本借鉴了 angular , 提供 10 个过滤器， 包括有： 日期 小数点位数保留 货币 大小写 等
Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式

2. 使用方式
   1. 全局定义过滤器

    <p> {{ time | timeFilter('/')}} </p>
   

      Vue.filter('timeFilter',function ( val,type ) {
        console.log( val )
        //val 就是我们获得的数据
        // return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果
   
        var date = new Date ( val )
   
        // 2019-6-26
   
        return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
      })
   

   2. 局部定义过滤器

  new Vue({
    el: '#app',
    data: {
      time: Date.now()
    },
    filters: { //过滤器的配置项
      'timeFilter': function ( val,type ){
        var date = new Date ( val )
        return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
      }
    }
  })

3. 过滤器要想获得我们的数据，要通过一个叫做 ‘管道符 | ’ 来获取数据
4. 过滤器是对已经有的数据进行格式化，也就是必须先有数据，在去格式化