Vue中獲取當前時間,可用於判斷資訊是否已過有效時間
阿新 • • 發佈:2018-11-27
<template> <div class="content-wrapper"> <section> <el-table border stripe :data="datas" highlight-current-row @current-change="handleCurrentChange" width="100%" tooltip-effect="light" v-loading="requested"> <el-table-column label="截止時間" :show-overflow-tooltip="true" prop="endTime" header-align="center" align="center"> </el-table-column> <el-table-column label="狀態" header-align="center" align="center"> <template slot-scope="scope"> <el-tag type="info" v-if="currentTime > scope.row.endTime">失效</el-tag> <el-tag type="success" v-if="currentTime < scope.row.endTime">未失效</el-tag> </template> </el-table-column> </el-table> </section> </div> </template> <style> </style> <script> export default { data() { return { queryForm: { title: '', page: 1, size: 10 }, datas: [], requested: false, currentTime: '', } }, mounted() { this.query(this.queryForm.page, this.queryForm.size); }, methods: { query() { this.requested = true; this.http.get('/admin/messageInfo', this.queryForm).then(resp => { this.currentTime = this.format(new Date(), "yyyy-MM-dd HH:mm:ss"); this.currentRow = null; this.datas = resp.data.content; }).finally(() => { this.requested = false; }); }, format(date, fmt) { let o = { "M+": date.getMonth() + 1, //月份 "d+": date.getDate(), //日 "H+": date.getHours(), //小時 "m+": date.getMinutes(), //分 "s+": date.getSeconds(), //秒 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); for (let k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; }, } } </script>
需要注意的一點是:HH才是24小時制,hh是12小時制
因此如果用value-format時間元件,元件只會保留日期的選擇,會失去時間的選擇