Vue: filters filter

        Date and time formatting is a requirement that is often encountered in Vue front-end projects. Here, we will introduce how to solve such requirements more elegantly around Vue's filters.

Notes on the use of filters

        Vue allows developers to customize filters, which can achieve some common text formatting requirements.

        The point to pay attention to when using is: the filter can be used in two places - ① double curly braces interpolation expression; ② v-bind expression . The other is where the filter is written: it should be at the end of the JavaScript expression and separated from the expression with the pipe character .

        For example: Suppose we have defined a filter named: dateTimeFormat , which is used for date and time formatting operations, then the writing method when using it is as follows,

 

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

        The displayed effect is as follows,

Two ways to define filters

        Next, let's take a look at the definition of the filter. The Vue.js official website document provides two ways.

Method 1: Local definition

        A local definition is similar to a component's local registration operation, which can only be used inside the current component.

Below we define the dateTimeFormat filter         mentioned above , here we need to use a third-party library moment.js, the installation method is as follows,

npm install moment -S

        After installation, it can be imported directly in the local components.

import moment from 'moment'

        Next, we start to define the filter dateTimeFormat , the complete sample code is as follows,

<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>

Method 2: Global definition

        Next, let's take a look at how to define a global filter,

/*
 * @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')

        The end result is the same, except that globally defined filters can be used in any component in the project.