vue3 issues regarding time display formatting

vue3 time display format

Why does vue3 delete filter (filter)

In fact, the reason is that vue3 needs to simplify the code

The filter function is repeated, the functions that filter can achieve

It can basically be implemented using methods and computed methods

Therefore, the vue source code for filter was deleted, which is more convenient to maintain

Time formatting of vue2

Refer to useDateFormat first

Time formatting of vue3

vueuse

Insert code slice here
<template>
<!-- show -->
  <div>{{create_time}}</div>
</template>
```<script>
import { useDateFormat } from '@vueuse/core'
export default {
  data(){
      return{
      //The time required for formatting		create_time:' '
      }
  },
  created() {
	
  },
  methods:{
      //Requested data      this.create_time = useDateFormat(Here is the time you want to format, for example：.create_time,'YYYY-MM-DD')
      //Can be formatted      /*YYYY-MM-DD HH:mm:ss
		 YYYYY MM month DD day
		 YYYYYYYY MM month DD day HH hour mm minute ss seconds
      */
  }
}
</script>

How to handle time formats for vue3

There are several ways to process time formats in Vue3:

Use past operators |

Vue3's new past operators can simply format time.

For example:

<p>{{ 2021-10-10 | date }}</p>
<p>{{ 2021-10-10 | time }}</p> 
<p>{{ 2021-10-10 | datetime }}</p>

Rendering:

10/10/2021 
10:00:00 
10/10/2021 10:00:00

Using DateTimeFormat

Vue3 supports direct use of formatting time.

For example:

const df = new ('en', { 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric'
})
 
new Vue({
  template: '<p>{{ date }}</p>',
  computed: {
    date() {
     return (new Date(2021, 9, 10)) 
    }
  }  
}) 

This renders:

October 10, 2021

Using third-party libraries

You can use third-party libraries such as date-fns to format the time.

For example:

import { format } from 'date-fns'
 
new Vue({
  template: '<p>{{ date }}</p>',
  computed: {
    date() {
      return format(new Date(2021, 9, 10), 'MMM dd, yyyy')
    }
  }
})

This will also render: October 10, 2021 So, the main way to process time formatting in Vue3 is:

1. Use the built-in | past operator

2. Call directly

3. Compared with Vue 2, Vue 3 simplifies time formatting, supports richer formatting functions in built-in, and also better supports APIs such as Intl in modern environments.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.