vue获取当前日期和时间并进行格式化
1.样式:2.思路:这里我用的是用elementui框架搭的结构,其中图标icon采用的是插槽。prefix:指的是插在前面suffix:指的是插在后面<span class="currentDate"><span slot="prefix" class="el-icon-timer"></span>{{dateFormat(date)}}</span&g
·
1.样式:
2.思路:
这里我用的是用elementui框架搭的结构,其中图标icon采用的是插槽。
prefix:指的是插在前面
suffix:指的是插在后面
<span class="currentDate">
<span slot="prefix" class="el-icon-timer"></span>
{{dateFormat(date)}}
</span>
css样式:
.currentDate{
display: inline-block;
vertical-align: text-bottom;
width: 200px;
height: 24px;
line-height: 24px;
color:#7D7D87;
// border: 1px solid red;
margin-left: 20px
}
接下来看具体代码:
data() {
return {
date:new Date(),
}
},
mounted(){
//获取当前日期
let that= this;
this.timer = setInterval(function() {
that.date = new Date().toLocaleString();
});
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer);
}
},
methods:{
//当前日期格式化
dateFormat(){
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1 < 10 ?
'0' + (date.getMonth() + 1) : date.getMonth()+ 1
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
// var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
// var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
// var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return year + '-' +month + '-' + day
}
}
完成
更多推荐
所有评论(0)