vue的过滤器可以用来对数据进行格式化

1.过滤器注册

过滤器注册分为全局注册和局部注册
(1)全局注册：所有的组件中都能使用
语法：Vue.filter(过滤器名称,回调函数)
回调函数的参数就是需要过滤处理的数据

//入口文件 main.jsimport Vue from 'vue'import App from './App'import router from './router'Vue.filter('toUpperCase',function(val){ return val.toUpperCase()})

(2)局部注册：只能在该组件中使用
在组件中添加filters属性，他的值是一个对象。key就是过滤器名称，他的值为回调函数。

<script>import Child from "./components/Child.vue"import Child2 from "./components/Child2.vue"export default { data() { return { msg:"good day" } }, filters:{ toUSD:function(val){ return "$" + val } }}</script>

2.过滤器的调用

语法： data | 过滤器名称
过滤器支持串联： data | 过滤器1 | 过滤器2

<template><div id="app"> <p>{{msg}}</p> <!-- 使用全局注册的过滤器 --> <p>转换为大写 -- {{msg | toUpperCase}}</p> <!-- 使用局部注册的过滤器 --> <p>添加$前缀 -- {{msg | toUSD}}</p> <!-- 过滤器串联 --> <p>过滤器串联 -- {{msg | toUpperCase | toUSD}}</p></div></template>

PS:过滤器除了可以在{{}}中使用外，还可以在v-bind/v-html中使用

3.实例 格式化时间日期

使用第三方插件moment.js来对日期进行格式化
引入插件

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>

使用npm

npm install moment --save

//引入momentimport moment from 'moment'

基本使用：

//注册全局过滤器import Vue from 'vue'import moment from 'moment'Vue.filter('dateFormat',function(val){ //引入moment后就可以使用moment这个对象，它本身也是一个函数 return moment(val).format();})

//App组件 date = new Date()<template><div id="app"> <!-- 原始格式: --> <p>{{date}}</p> <!-- 使用moment过滤: --> <p>{{date | dateFormat}}</p></div></template>

渲染结果：

Fri Nov 08 2019 23:15:02 GMT+0800 (中国标准时间)2019-11-08T23:15:02+08:00

过滤器函数还可以接收自定义的参数
moment的format函数可以根据传入的参数来控制数据输出的格式，详见
http://momentjs.cn/

Vue.filter('dateFormat',function(value,format){ return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss');})

使用实例

<div id="app"> <p>原始格式:{{date}}</p> <p>默认格式:{{date | dateFormat}}</p> <p>只显示年月日：{{date | dateFormat('YYYY-MM-DD')}}</p> <p>只显示时分秒：{{date | dateFormat('HH:mm:ss')}}</p></div>

渲染结果:

原始格式:Sat Jul 06 2019 11:47:46 GMT+0800 (中国标准时间)默认格式:2019-07-06 11:47:46只显示年月日：2019-07-06只显示时分秒：11:47:46