Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the ways of time conversion in vue

2025-01-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

Most people do not understand the knowledge points of this article "what are the ways of vue time conversion?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the ways of vue time conversion?"

VUE time conversion

Doing a project will definitely involve a lot of data types, which can be converted between data types. Sometimes the time that the front end gets from the back end is not up to standard, so you need to convert it and then use it later. There are two ways of conversion, depending on which one you prefer. Time has been converted into an example here.

Filter filter global filter

Write in main.js

/ / timestamp filter Vue.filter ('dateFormat' (dataStr) = > {var time = new Date (dataStr) function timeAdd0 (str) {if (str < 10) {str ='0' + str} return str} var y = time.getFullYear () var m = time.getMonth () + 1 var d = time.getDate () var h = time.getHours () var mm = time.getMinutes () var s = time.getSeconds () return y +'-'+ timeAdd0 (m) + '-' + timeAdd0 (d) +'+ timeAdd0 (h) +':'+ timeAdd0 (mm) +':'+ timeAdd0 (s)})

At this point, the timestamp details.createTime will become the parameter dataStr of Vue.filter to perform the operation.

Local filter

In the vue single file, there are filters attributes, juxtaposed with periodic functions.

Note that at this time, filters is not filter. Local is generally one more s than global. For example, the difference between global and local in components is the same.

Created () {} Filters: {dateFormat:function (dataStr) {var time = new Date (dataStr) function timeAdd0 (str) {if (str < 10) {str ='0' + str} return str} var y = time.getFullYear () var m = time.getMonth () + 1 var d = time.getDate () Var h = time.getHours () var mm = time.getMinutes () var s = time.getSeconds () return y +'-'+ timeAdd0 (m) +'-'+ timeAdd0 (d) +'+ timeAdd0 (h) +':'+ timeAdd0 (mm) +':'+ timeAdd0 (s)}} Use

It is used in the same way globally and locally. We just need to add | after the filtered data.

Release time: {{details.createTime | dateFormat}} JS reference conversion

Create a js in the utils file for time conversion

Export function tempToData (unixtimestamp2) {var unixtimestamp = new Date (unixtimestamp2) var year = 1900 + unixtimestamp.getYear () var month ='0' + (unixtimestamp.getMonth () + 1) var date ='0' + unixtimestamp.getDate () var hour ='0' + unixtimestamp.getHours () var minute ='0' + unixtimestamp.getMinutes () var second ='0' + unixtimestamp.getSeconds () return year +'-'+ month.substring (month.length-2) Month.length) +'-'+ date.substring (date.length-2, date.length) +''+ hour.substring (hour.length-2, hour.length) +':'+ minute.substring (minute.length-2, minute.length) +':'+ second.substring (second.length-2, second.length)}

When we use it at this time, all we have to do is reference js and use it.

Global reference

Just refer to it in main.js

Import {tempToData} from'@ / utils/DataUtils' Local reference

Referenced in the corresponding vue file

Import {tempToData} from'@ / utils/DataUtils' usage {{mTempToData (details.createTime)}} above is the content of this article on "what are the ways of vue time conversion?" I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report