当前位置：首页 > news >正文

Vue：filters过滤器

news 2025/9/15 5:28:33

日期、时间格式化是Vue前端项目中较为常遇到的一个需求点，此处，围绕Vue的过滤器来介绍如何更为优雅的解决此类需求。

过滤器filters使用注意点

Vue允许开发者自定义过滤器，可以实现一些常见的文本格式化等需求。

使用时要注意的点在于：过滤器可使用在两个地方——①双花括号插值表达式；②v-bind表达式。另一个是过滤器书写的位置：应在JavaScript表达式的尾部，并且使用管道符与表达式进行分割开来。

例如：假定我们已经定义了一个过滤器，名称为：dateTimeFormat，用于日期时间的格式化操作，那么在使用时的书写方式如下，

<div class="left">{{ JavaScript表达式 | dateTimeFormat  }}</div>

显示的效果如下，

过滤器filters的两种定义方式

接下里我们看一下过滤器的定义方式，Vue.js官网文档提供了两种方式，

方式1：局部定义

局部定义类似于组件的局部注册操作，只能在当前组件内部使用。

以下我们对上面提到的dateTimeFormat过滤器进行定义，这里要使用到一个第三方库moment.js，安装方式如下，

npm install moment -S

安装之后直接在局部组件中引入即可。

import moment from 'moment'

接着，我们开始定义过滤器dateTimeFormat，完整的示例代码如下，

<template><div class="left">{{ currentDate | dateTimeFormat  }}</div>
</template>
<script>
import moment from 'moment'
export default {name: "Top",props: {},filters: {dateTimeFormat: function (value, pattern = 'YYYY-MM-DD HH:mm:ss') {return moment(value).format(pattern);}},data() {return {timerHandler: -1,currentDate: null,}},computed: {title() {return process.env.VUE_APP_TITLE;},moduleName() {return this.$store.state.module_name;},},mounted() {this.getCurrentDate();this.setTimter();},methods: {setTimter() {this.timerHandler = setInterval(() => {this.getCurrentDate();}, 1000);},getCurrentDate() {this.currentDate = Date.now();}},beforeUpdate() {},beforeDestroy() {clearInterval(this.timerHandler);}
}
</script>
<style lang="less" scoped>
</style>

方式2：全局定义

接着，我们看一下如何进行全局的过滤器定义，

/** @Description: * @Author: Xwd* @Date: 2023-02-15 22:26:06* @LastEditors: Xwd* @LastEditTime: 2023-02-18 14:53:58*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import moment from 'moment'
Vue.config.productionTip = false//定义全局过滤器
Vue.filter("dateTimeFormat",(value,pattern='YYYY-MM-DD HH:mm:ss')=>{return moment(value).format(pattern);
})new Vue({router,store,render: h => h(App)
}).$mount('#app')

最终效果是一致的，不同之处在于，全局定义的过滤器可以在项目中的任何组件中进行使用。