vue的过滤器可以用来对数据进行格式化
过滤器注册分为全局注册和局部注册
(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>
语法: 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中使用
使用第三方插件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