vue组件JS动态显示当前系统日期、星期、时间,格式
在Vue组件中,你可以使用计算属性(computed)来动态显示当前的系统日期、星期和时间。以下是一个简单的例子:
<template>
<div>
<p>当前日期: {{ currentDate }}</p>
<p>星期: {{ currentWeekDay }}</p>
<p>当前时间: {{ currentTime }}</p>
</div>
</template>
<script>
export default {
name: 'DateTimeComponent',
computed: {
currentDate() {
return new Date().toDateString();
},
currentWeekDay() {
const days = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return days[new Date().getDay()];
},
currentTime() {
return new Date().toLocaleTimeString();
}
}
}
</script>
这个组件包含三个计算属性:currentDate
、currentWeekDay
和currentTime
。它们分别返回当前日期、星期和时间。toDateString
方法用于获取日期,getDay
方法用于获取星期,而toLocaleTimeString
用于获取时间。这些计算属性会在模板中显示,并且会随着时间的变化而更新。
评论已关闭