Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what are the common time format conversions in vue". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "what are the common time format conversions in vue" can help you solve the problem.

The time returned by the backend in the project can be in a variety of forms, such as timestamp, ISO standard time format, and so on. We need to convert it into a visible time format:

1. Convert the 2020-06-27T14:20:27.000000Z time format to 2020-06-27 14:20:27

A method can be defined as a global filter, or a global method can be easily referenced

Vue.filter ('format', function (date) {var json_date = new Date (date). ToJSON () Return new Date (new Date (json_date) + 8 * 3600 * 1000). ToISOString (). Replace (/ T _ replace,''). Replace (/\. [\ d] {3} Z _ hand,')}) {{timeVal | format}} 2, format function formatDate (date, fmt) {if (/ (y +) / .test (fmt)) {fmt = fmt.replace (RegExp.$1) (date.getFullYear () +'). Substr (4-RegExp.$1.length)} let o = {'date.getSeconds (4-let k in o))} for o = {let str = o [k] +' fmt = fmt.replace (RegExp.$1)) {let str = o [k] + 'fmt = fmt.replace (RegExp.$1) (RegExp.$1.length = 1)? Str: padLeftZero (str)}} return fmt} function padLeftZero (str) {return ('00' + str) .substr (str.length)} usage: formatDate (date,' yyyy-MM-dd hh:mm'); formatDate (date, 'yyyy-MM-dd'); 3. Use moment.js (time formatting plug-in) in Vue

Install the moment.js plug-in

Npm install moment-save

Define a global filter

Import moment from 'moment';Vue.filter (' dateFormat',function (value,format)) {return moment (value) .format (format);} usage: {{time | dateFormat ('YYYY-MM-DD HH:mm:ss')}} define the time format directly in Vue method: import moment from' moment';Vue.prototype.$moment = moment; uses this.$moment (timeVal) .format ('YYYY-MM-DD') as a method in the vue file / / 2022-02-11 this is the end of the introduction of "what are the common time format conversions in vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.