vue项目中回显当前时间的农历时间

npm安装

npm install --save chinese-lunar-calendar
vue中用法

   <div class="right-cla">{{nowTime}}</div>
   <div class="center-cla">
      <div>  {{nowDate}} </div>
      <div>农历:{{getLunarDay.dateStr}}</div>
  </div>
<script>
import { getLunar } from 'chinese-lunar-calendar'

export default {
  data() {
    return {
        nowDate: "", // 当前日期
        nowTime: "", // 当前时间
        getLunarDay: '',// 当前农历时间
	year: new Date().getFullYear(),
      	month: new Date().getMonth() + 1,
      	date: new Date().getDate()
    }
  },
  mounted() {
	// 获取农历
    this.getLunarDay = getLunar(this.year, this.month, this.date)
    // 获取当前时间 
    this.currentTime();
  },
 methonds:{
     //获取当前时间
            currentTime() {
                setInterval(this.formatDate, 500);
            },
            formatDate() {
                let date = new Date();
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                month = month < 10 ? "0" + month : month; // 如果只有一位,则前面补零
                let day = date.getDate(); // 日
                day = day < 10 ? "0" + day : day; // 如果只有一位,则前面补零
                let week = date.getDay(); // 星期
                let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
                let hour = date.getHours(); // 时
                hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,则前面补零
                let minute = date.getMinutes(); // 分
                minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,则前面补零
                let second = date.getSeconds(); // 秒
                second = second < 10 ? "0" + second : second; // 如果只有一位,则前面补零
                this.nowDate = `${year}/${month}/${day}    ${weekArr[week]}`;
                this.nowTime = `${hour}:${minute}`;
            },
}
}
</script>
posted @ 2021-07-28 14:45  小基狠努力啊  阅读(682)  评论(0编辑  收藏  举报