vue フレームワークでは、時刻の表示と選択に el-date-picker タグを使用することが多く、一般的な時刻形式には年-月-日 (yyyy-MM-dd)、年-月-日時-分が含まれます。秒 (yyyy-MM-dd HH-mm-ss)、標準時刻形式、およびタイムスタンプ。そこで今回はよく使われる取得方法とそれらの間の変換方法をまとめてみました。
1. 現在時刻を取得します。
まずは効果を見てみましょう:
Ⅰ. 形式:年-月-日 時-分-秒 (yyyy-MM-dd HH-mm-ss)
<template>
<div>
<h1>vue 时间格式常见应用</h1>
<h3>获取当前时间(格式:年月日时分秒):{
{time}}</h3>
</div>
</template>
<script>
export default {
data() {
return {
time:''
}
},
created() {
this.getNowTime();
},
methods: {
getNowTime(){
const yy = new Date().getFullYear()
const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new
Date().getMonth() + 1) : (new Date().getMonth() + 1)
const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new
Date().getDate()
const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new
Date().getHours()
const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() :
new Date().getMinutes()
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() :
new Date().getSeconds()
this.time = yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss;
}
}
}
</script>
Ⅱ. 形式:標準時
<template>
<div>
<h1>vue 时间格式常见应用</h1>
<h3>获取当前标准时间(格式:年月日时分秒):{
{standard_time}}</h3>
</div>
</template>
<script>
export default {
data() {
return {
standard_time:''
}
},
created() {
this.getGMTtime();
},
methods: {
getGMTtime(){
this.standard_time =new Date();
}
}
}
</script>
Ⅲ. 形式:タイムスタンプ
<template>
<div>
<h1>vue 时间格式常见应用</h1>
<h3>获取当前时间的时间戳:{
{current_timestamp}}</h3>
</div>
</template>
<script>
export default {
data() {
return {
current_timestamp:''
}
},
created() {
this.getnowtimestamp();
},
methods: {
getnowtimestamp(){
var date = new Date();
this.current_timestamp = Date.parse(date)
}
}
}
</script>
2. 時刻形式間の変換
効果:
Ⅰ. 年月日時分秒の標準時への変換
<template>
<h1>时间格式之间的转换</h1>
<h3>1.年月日时分秒格式转换成标准时间</h3>
<div style="display: flex;">
<h5>假如将"2022-08-17 09:54:48"转换成标准时间格式,则标准格式为:</h5>
<h4>{
{conversion_time}}</h4>
</div>
</template>
<script>
export default {
data() {
return {
conversion_time: new Date('2022-08-17 09:54:48')
}
}
}
</script>
Ⅱ.標準時を年月日時分秒形式に変換する
<template>
<h1>时间格式之间的转换</h1>
<h3>2.标准时间转换成年月日时分秒格式</h3>
<div style="display: flex;">
<h5>假如将"Wed Aug 17 2022 09:54:48 GMT+0800 (中国标准时间)"转换成年月日时分秒格式,则
写为:</h5>
<h4>{
{conversion_time1}}</h4>
</div>
</template>
<script>
export default {
data() {
return {
conversion_time1:'',
}
},
created() {
this.gettime();
},
methods: {
gettime(){
var date = new Date('Wed Aug 17 2022 09:54:48 GMT+0800 (中国标准时间)');
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var min = date.getMinutes();
min = min < 10 ? ('0' + min) : min;
var s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
this.conversion_time1 = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':'
+ s;
}
}
}
</script>
Ⅲ. 年月日時分秒形式のタイムスタンプへの変換
<template>
<h3>3.年月日时分秒格式转换成时间戳</h3>
<div style="display: flex;">
<h5>假如将"2022-08-17 09:54:48"转换成时间戳,则写为:</h5>
<h4>{
{conversion_time2}}</h4>
</div>
</template>
<script>
export default {
data() {
return {
conversion_time2:Date.parse('2022-08-17 09:54:48')
}
}
}
</script>
このとき、変換されたタイムスタンプが正しいかどうかをどのように判断すればよいか迷っていませんか? オンライン変換ツールを使用して変換と検出を行うことができます 変換ツールの Web サイト: タイムスタンプ (Unix タイムスタンプ) 変換ツール - オンラインツール
それでは、確認してみましょう:
したがって、変換は問題ありません。