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> 

文章来源: https://blog.csdn.net/fu983531588/article/details/90317520