Vueグローバルフィルタによる時間のフォーマット
13079 ワード
title:Vueでは常に時間を取得し、Vueのグローバルフィルタは標準時間のフォーマット処理を実現することができます.
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="./vue.js">script>
head>
<body>
<div id="app">
<h3>{{ time | dateFormat('')}}h3>
div>
<script>
// =“dateFormat”
Vue.filter('dateFormat', function (datestr, pattern = "") {
var dt = new Date(datestr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = (dt.getHours()).toString().padStart(2, '0')
var mm = (dt.getMinutes()).toString().padStart(2, '0')
var ss = (dt.getSeconds()).toString().padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
const vm = new Vue({
el: '#app',
data: {
time: new Date() //
},
methods: {}
});
script>
body>
html>