Vue中的Filter过滤器

局部过滤器

<template>
  <div class="home">
    <div class="time">{{item.rateTime | formatDate}}</div>   //  使用过滤器
  </div>
</template>
<script>
import Moment from 'moment'   // 引入插件
export default {
  name: 'home',
  data () {
    return {
    }
  },
  filters: {    // 注册局部过滤器
    formatDate: function (value) {
      return Moment(value).format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>

全局过滤器

1. 在 main.js 文件里注册过滤器

   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import Moment from 'moment'
   
   // 定义全局时间戳过滤器
   Vue.filter('formatDate', function(value) {
     return Moment(value).format('YYYY-MM-DD HH:mm')
   })
   
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
   })
   

2. 在组件中使用过滤器

   <template>
     <div class="home">
       <div class="time">{{item.rateTime | formatDate}}</div>   //  使用过滤器
     </div>
   </template>
   

   抽离过滤器，定义到一个文件中

3. 在 src 目录下创建一个 filter 文件夹，并在其文件夹下创建一个 filters.js 文件
4. 
5. 在 filters.js 文件写上如下代码

   import Moment from 'moment'
   
   let formatDate = function(value) {
   	return Moment(value).format('YYYY-MM-DD HH:mm')
   }
   
   export {
       formatDate
   }
   

6. 在 main.js 文件里引入 filter.js 文件并注册全局过滤器

   import * as filters from './filter/filters'
   
   // 导出的是对象，可以直接通过 key 和 value 来获得过滤器的名和过滤器的方法
   Object.keys(filters).forEach(key => {
     Vue.filter(key, filters[key])
   })
   

7. 在组件中使用过滤器

   <template>
     <div class="home">
       <div class="time">{{item.rateTime | formatDate}}</div>   //  使用过滤器
     </div>
   </template>