vue的过滤器可以用来对数据进行格式化
1.过滤器注册
过滤器注册分为全局注册和局部注册
(1)全局注册:所有的组件中都能使用
语法:Vue.filter(过滤器名称,回调函数)
回调函数的参数就是需要过滤处理的数据
//入口文件 main.js
import 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
//引入moment
import 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
原文地址:https://www.cnblogs.com/OrochiZ-/p/11823850.html
时间: 2024-10-08 01:24:42