Vue：filters过滤器_vue filters 过滤器

        日期、时间格式化是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')

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