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>

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

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

import Moment from 'moment'

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

export {
    formatDate
}

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

import * as filters from './filter/filters'

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

4. 在组件中使用过滤器

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