快捷導(dǎo)航

關(guān)于vue中的時間格式轉(zhuǎn)化問題

更新時間：2022年07月06日 11:13:54 作者：醉夢洛

這篇文章主要介紹了關(guān)于vue中的時間格式轉(zhuǎn)化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue時間格式轉(zhuǎn)化問題

1. 效果圖

2. 需求：前臺展示一律用的時間規(guī)格

yyyy-MM-dd HH:mm:SS,即要求月日時分秒小于兩位數(shù)的都要補(bǔ)0，這樣顯得整體化一。所以下面就是專門對月日時分秒小于10時做補(bǔ)0的處理，實際剛開始想到的就是直接挨個判斷月日時分秒<10時，直接拼接0的想法，被同事打斷了，這個方法太繁瑣了。所以發(fā)現(xiàn)了以下簡潔的方法，據(jù)說是es6中的函數(shù)用法，還沒有去具體查詢出處，先用著再說吧。接下來分析代碼.

可以把它寫在一個單獨的js中，這樣就可以寫在公共方法里，大家都可以調(diào)用的那種，當(dāng)然也可以寫在你需要地方的方法里，按照自己的實際情況來

① 寫在公共方法里

可以在工具文件夾底下新建一個data.js，如下：

代碼部門：

其中Vue.prototype是將formatDate這個方法設(shè)置問全局方法，這樣就都可以調(diào)用了，注意方法名名為formatDate，后面用

/**
 * Created by syp on 2020/5/15.
 */
 
exports.install = function (Vue, options) {
  Vue.prototype.formatDate = function (row, column) {
    let data = row[column.property]
    if (data == null) {
      return null
    }
    let dt = new Date(data)
    let yyyy = dt.getFullYear()
    let MM = (dt.getMonth() + 1).toString().padStart(2, '0')
    let dd = dt.getDate().toString().padStart(2, '0')
    let h = dt.getHours().toString().padStart(2, '0')
    let m = dt.getMinutes().toString().padStart(2, '0')
    let s = dt.getSeconds().toString().padStart(2, '0')
    return yyyy + '-' + MM + '-' + dd + ' ' + h + ':' + m + ':' + s
  }
}

處理好data.js后,再在公共js中調(diào)用一下，設(shè)置為全局的，這樣大家就都可以用了

然后在vue頁面進(jìn)行調(diào)用圖：

:formatter="formatDate"

formatDate就是設(shè)置為全局方法的方法名

② 將它只是變?yōu)榫植康母袷交瘯r間調(diào)用，那么就需要把格式化時間的代碼放在調(diào)用頁面的方法中

一下這個方法只需要放在本頁面的method底下就好了

formatDate (row, column) {
        let data = row[column.property]
        if (data == null) {
          return null
        }
        let dt = new Date(data)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
      },

在列表展示的熟悉中運(yùn)用和上面一樣都用:formatter="formatDate"就ok了。

圖示：

vue轉(zhuǎn)換時間格式(適用于uni-app)

1. 前端獲取實時時間

<template>
	<view class="content">
		<view>{{date}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
					date: new Date()
			}
		},
		onLoad() {},
		mounted: function() {
			let that = this
			//setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式
			//每一毫秒調(diào)用一次
			that.timer = setInterval(function() {
				that.date = new Date();
			}, 1000)
		},
		beforeDestroy: function() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
		}
	}
</script>

獲得國際標(biāo)準(zhǔn)時間

2. 運(yùn)用過濾器

通過給Vue實例添加選項filters來設(shè)置，給時間格式化處理

<template>
?? ?<view class="content">
?? ??? ?<view>{{date ?| formatDate}}</view>
?? ?</view>
</template>

<script>
?? ?//一、時間轉(zhuǎn)換關(guān)鍵
?? ?var padDate = function(value) {
?? ??? ?return value < 10 ? '0' + value : value;
?? ?};
?? ?export default {
?? ?//二、時間轉(zhuǎn)換關(guān)鍵
?? ??? ?filters: {
?? ??? ??? ?formatDate: function(value) {
?? ??? ??? ??? ?var date = new Date(value);
?? ??? ??? ??? ?var year = date.getFullYear();
?? ??? ??? ??? ?var month = padDate(date.getMonth()+1);
?? ??? ??? ??? ?var day = padDate(date.getDate());
?? ??? ??? ??? ?var hours = padDate(date.getHours());
?? ??? ??? ??? ?var minutes = padDate(date.getMinutes());
?? ??? ??? ??? ?var seconds = padDate(date.getSeconds());
?? ??? ??? ??? ?return year + '-' + month + "-" + day + " ?" + hours + ":" + minutes + ":" + seconds
?? ??? ??? ?}
?? ??? ?},
?? ??? ?
?? ??? ?data() {
?? ??? ??? ?return{
?? ??? ??? ??? ?date: new Date()
?? ??? ??? ?}
?? ??? ?},
?? ??? ?onLoad() {},
?? ??? ?mounted: function() {
?? ??? ??? ?let that = this
?? ??? ??? ?//setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式
?? ??? ??? ?//每一毫秒調(diào)用一次
?? ??? ??? ?that.timer = setInterval(function() {
?? ??? ??? ??? ?that.date = new Date();
?? ??? ??? ?}, 1000)
?? ??? ?},
?? ??? ?beforeDestroy: function() {
?? ??? ??? ?if (this.timer) {
?? ??? ??? ??? ?clearInterval(this.timer)
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ?}
?? ?}
</script>