效果展示，css样式可以根据自己喜好添加。

使用vue实现倒计时功能之前，需要先动态的获取当前时间

Todo.vue代码

<template>
	<div>当前时间为:{{nowTime}}</div>
</template>
<script>
export default {
	name:"Todo",
	data(){
		return{
			nowTime:new Date(),
		}
	},
	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();
	      let week = date.getDay(); // 星期
	      let weekArr = ["星期日","星期一","星期二","星期三","星期四","星期五", "星期六",];
	      return (
	        year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + weekArr[week]
	      );
	    },
	}, 
	//在挂载时启动定时器
	mounted() {
	    let that = this;
	    this.timer = setInterval(() => {
	      that.nowTime = new Date().toLocaleString();
	    }, 1000);
  	},
  	//实例销毁之前清除定时器
	beforeDestroy() {
	    if (this.timer) {
	      clearInterval(this.timer);
	    }
  	},
}
</script>

App.vue代码

<template>
	<Todo></Todo>
</template>
<script>
import Todo from "./components/Todo.vue"
export default{
	name:"App",
	components:{Todo},
}
</script>

main.js代码

//引入vue
import Vue from "vue";
//引入App组件,它是所有组件的父组件
import App from "./App.vue";
//关闭vue的生产提示
Vue.config.productionTip = false;
//创建vue的实例对象---vm
new Vue({
  el: "#app",
  render: (h) => h(App),
});

使用vue计算某一年的天数、剩余的天数、某一月剩余的天数、一周剩余的天数、今天剩余的时间

Todo.vue代码，App.vue和main.js代码同上

<template>
    <div>当前时间为:{{ dateFormat(nowTime) }}</div>
	<div>本年的天数为:{{currentYearDay}}</div>
	<div>本年剩余的天数为:{{remainderYearDay}}</div>
	<div>本月剩余的天数为:{{remainderMonthDay}}</div>
	<div>本周剩余的天数为:{{remainderWeekDay}}</div>
	<div>今天剩余的时间为:{{ 24 - (new Date().getHours() + 1) }}时{{60 - new Date().getMinutes()}}分{{ 60 - new Date().getSeconds() }}秒</div>
</template>
<script>
export default {
  name: "Todo",
  data() {
    return {
      nowTime: new Date(),
    };
  },
  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();
      let week = date.getDay(); // 星期
      let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六",];
      return (year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + weekArr[week]);
    },
  },
  computed: {
    currentYearDay() {
      let nowYear = new Date().getFullYear();
      return (nowYear % 4 == 0 && nowYear % 100 != 0) || nowYear % 400 == 0 ? 366 : 365;
    },
    remainderYearDay() {
      let nowTime = new Date();
      let endTime = new Date(nowTime.getFullYear() + 1, 1, 1, 0, 0, 0, 0);
      return parseInt((endTime - nowTime) / 86400000) - 31;
    },
    remainderMonthDay() {
      let nowMonth = new Date().getMonth() + 1;
      let nowYear = new Date().getFullYear();
      let nowDay1 = new Date().getDate();
      if (nowMonth === 1 || nowMonth === 3 || nowMonth === 5 || nowMonth === 7 || nowMonth === 8 || nowMonth === 10 || nowMonth === 12) {
        return 31 - nowDay1;
      }
      if (nowMonth === 4 || nowMonth === 6 || nowMonth === 9 || nowMonth === 11) {
        return 30 - nowDay1;
      }
      if (nowMonth == 2) {
        if ((nowYear % 4 == 0 && nowYear % 100 != 0) || nowYear % 400 == 0) {
          return 29 - nowDay1;
        } else {
          return 28 - nowDay1;
        }
      }
    },
    remainderWeekDay() {
      return 7 - new Date().getDay();
    },
  },
 //在挂载时启动定时器
  mounted() {
    let that = this;
    this.timer = setInterval(() => {
      that.nowTime = new Date().toLocaleString();
    }, 1000);
  },
  //实例销毁之前清除定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>

参考文档:https://blog.csdn.net/CDZAllier/article/details/109368523