如果本文幫助到你，本人不勝榮幸，如果浪費了你的時間，本人深感抱歉。

項目線上demo：https://my.weblf.cn/lf_demo/others/rili_list

項目結構：

rili.vue

<template><div class="rili"><rili /></div> </template><script> import rili from './calendar/app' export default {components: { rili },data () {return {}},async mounted () {} } </script>

yinli_festival.json

{"01-06":"陰歷節1","01-10":"陰歷節2","01-15":"陰歷節3","02-07":"陰歷節7","03-03":"陰歷節8","04-07":"陰歷節12","04-12":"陰歷節16","04-08":"陰歷節17","05-07":"陰歷節18","05-17":"陰歷節21","05-28":"陰歷節22","06-09":"陰歷節24","11-20":"陰歷節54","11-21":"陰歷節55","12-18":"陰歷節58","12-19":"陰歷節59","12-27":"陰歷節62","12-20":"陰歷節63" }

?陽歷文件格式相同

?app.vue

<template><div id="calendar-page"><div class="list_box" v-if="isShow"><div class="today_time">今日日期：{{value}}</div><p class="otitle1">日程表</p><div class="festival_detail" v-for="(item,index) in yangli_arr" :key="index" :class="{'able_festival':space_festival(item.yangli)}"><p>陽歷：{{item.yangli}}</p><p>陰歷：{{toLunar(value[0],value[1],value[2])}}</p><p>節日：{{item.jieri}}</p><p>節日狀態：{{space_festival(item.yangli)?'距離:'+space_festival(item.yangli)+'天':'已過'}}</p></div></div></div> </template><script> import foli from './yinli_festival.json' // 獲取陰歷節日表 import yangli from './yangli_festival.json' // 獲取陽歷節日表export default {name: 'app',components: {},data () {return {value: [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()], // 默認日期events: {},month: new Date().getMonth() + 1, // 當前月timestamp: Date.now(), // 當前時間戳timeYear: new Date().getFullYear(), // 當前年MIN_YEAR: 1891,MAX_YEAR: 2100,lunarInfo: [ // 農歷轉換表[0, 2, 9, 21936], [6, 1, 30, 9656], [0, 2, 17, 9584], [0, 2, 6, 21168], [5, 1, 26, 43344], [0, 2, 13, 59728],[0, 2, 2, 27296], [3, 1, 22, 44368], [0, 2, 10, 43856], [8, 1, 30, 19304], [0, 2, 19, 19168], [0, 2, 8, 42352],[5, 1, 29, 21096], [0, 2, 16, 53856], [0, 2, 4, 55632], [4, 1, 25, 27304], [0, 2, 13, 22176], [0, 2, 2, 39632],[2, 1, 22, 19176], [0, 2, 10, 19168], [6, 1, 30, 42200], [0, 2, 18, 42192], [0, 2, 6, 53840], [5, 1, 26, 54568],[0, 2, 14, 46400], [0, 2, 3, 54944], [2, 1, 23, 38608], [0, 2, 11, 38320], [7, 2, 1, 18872], [0, 2, 20, 18800],[0, 2, 8, 42160], [5, 1, 28, 45656], [0, 2, 16, 27216], [0, 2, 5, 27968], [4, 1, 24, 44456], [0, 2, 13, 11104],[0, 2, 2, 38256], [2, 1, 23, 18808], [0, 2, 10, 18800], [6, 1, 30, 25776], [0, 2, 17, 54432], [0, 2, 6, 59984],[5, 1, 26, 27976], [0, 2, 14, 23248], [0, 2, 4, 11104], [3, 1, 24, 37744], [0, 2, 11, 37600], [7, 1, 31, 51560],[0, 2, 19, 51536], [0, 2, 8, 54432], [6, 1, 27, 55888], [0, 2, 15, 46416], [0, 2, 5, 22176], [4, 1, 25, 43736],[0, 2, 13, 9680], [0, 2, 2, 37584], [2, 1, 22, 51544], [0, 2, 10, 43344], [7, 1, 29, 46248], [0, 2, 17, 27808],[0, 2, 6, 46416], [5, 1, 27, 21928], [0, 2, 14, 19872], [0, 2, 3, 42416], [3, 1, 24, 21176], [0, 2, 12, 21168],[8, 1, 31, 43344], [0, 2, 18, 59728], [0, 2, 8, 27296], [6, 1, 28, 44368], [0, 2, 15, 43856], [0, 2, 5, 19296],[4, 1, 25, 42352], [0, 2, 13, 42352], [0, 2, 2, 21088], [3, 1, 21, 59696], [0, 2, 9, 55632], [7, 1, 30, 23208],[0, 2, 17, 22176], [0, 2, 6, 38608], [5, 1, 27, 19176], [0, 2, 15, 19152], [0, 2, 3, 42192], [4, 1, 23, 53864],[0, 2, 11, 53840], [8, 1, 31, 54568], [0, 2, 18, 46400], [0, 2, 7, 46752], [6, 1, 28, 38608], [0, 2, 16, 38320],[0, 2, 5, 18864], [4, 1, 25, 42168], [0, 2, 13, 42160], [10, 2, 2, 45656], [0, 2, 20, 27216], [0, 2, 9, 27968],[6, 1, 29, 44448], [0, 2, 17, 43872], [0, 2, 6, 38256], [5, 1, 27, 18808], [0, 2, 15, 18800], [0, 2, 4, 25776],[3, 1, 23, 27216], [0, 2, 10, 59984], [8, 1, 31, 27432], [0, 2, 19, 23232], [0, 2, 7, 43872], [5, 1, 28, 37736],[0, 2, 16, 37600], [0, 2, 5, 51552], [4, 1, 24, 54440], [0, 2, 12, 54432], [0, 2, 1, 55888], [2, 1, 22, 23208],[0, 2, 9, 22176], [7, 1, 29, 43736], [0, 2, 18, 9680], [0, 2, 7, 37584], [5, 1, 26, 51544], [0, 2, 14, 43344],[0, 2, 3, 46240], [4, 1, 23, 46416], [0, 2, 10, 44368], [9, 1, 31, 21928], [0, 2, 19, 19360], [0, 2, 8, 42416],[6, 1, 28, 21176], [0, 2, 16, 21168], [0, 2, 5, 43312], [4, 1, 25, 29864], [0, 2, 12, 27296], [0, 2, 1, 44368],[2, 1, 22, 19880], [0, 2, 10, 19296], [6, 1, 29, 42352], [0, 2, 17, 42208], [0, 2, 6, 53856], [5, 1, 26, 59696],[0, 2, 13, 54576], [0, 2, 3, 23200], [3, 1, 23, 27472], [0, 2, 11, 38608], [11, 1, 31, 19176], [0, 2, 19, 19152],[0, 2, 8, 42192], [6, 1, 28, 53848], [0, 2, 15, 53840], [0, 2, 4, 54560], [5, 1, 24, 55968], [0, 2, 12, 46496],[0, 2, 1, 22224], [2, 1, 22, 19160], [0, 2, 10, 18864], [7, 1, 30, 42168], [0, 2, 17, 42160], [0, 2, 6, 43600],[5, 1, 26, 46376], [0, 2, 14, 27936], [0, 2, 2, 44448], [3, 1, 23, 21936], [0, 2, 11, 37744], [8, 2, 1, 18808],[0, 2, 19, 18800], [0, 2, 8, 25776], [6, 1, 28, 27216], [0, 2, 15, 59984], [0, 2, 4, 27424], [4, 1, 24, 43872],[0, 2, 12, 43744], [0, 2, 2, 37600], [3, 1, 21, 51568], [0, 2, 9, 51552], [7, 1, 29, 54440], [0, 2, 17, 54432],[0, 2, 5, 55888], [5, 1, 26, 23208], [0, 2, 14, 22176], [0, 2, 3, 42704], [4, 1, 23, 21224], [0, 2, 11, 21200],[8, 1, 31, 43352], [0, 2, 19, 43344], [0, 2, 7, 46240], [6, 1, 27, 46416], [0, 2, 15, 44368], [0, 2, 5, 21920],[4, 1, 24, 42448], [0, 2, 12, 42416], [0, 2, 2, 21168], [3, 1, 22, 43320], [0, 2, 9, 26928], [7, 1, 29, 29336],[0, 2, 17, 27296], [0, 2, 6, 44368], [5, 1, 26, 19880], [0, 2, 14, 19296], [0, 2, 3, 42352], [4, 1, 24, 21104],[0, 2, 10, 53856], [8, 1, 30, 59696], [0, 2, 18, 54560], [0, 2, 7, 55968], [6, 1, 27, 27472], [0, 2, 15, 22224],[0, 2, 5, 19168], [4, 1, 25, 42216], [0, 2, 12, 42192], [0, 2, 1, 53584], [2, 1, 21, 55592], [0, 2, 9, 54560]],isShow: false, // 是否顯示列表tipText: '', // 節日描述tip_arr: [],rili_yin: '', // 當前農歷yangli_arr: [] // 陽歷數組}},watch: {timeYear (curVal, oldVal) {this.value = [this.timeYear, this.month, 15]this.isShow = falsethis.events = {}this.transTime()}},methods: {// 切換月selectMonth (month, year) {this.timeYear = yearthis.month = month},// 切換年selectYear (year) {this.timeYear = year},// 轉換農歷toLunar (year, month, day) {var yearData = this.lunarInfo[year - this.MIN_YEAR]if (year == this.MIN_YEAR && month <= 2 && day <= 9) {return [1891, 1, 1, '辛卯', '兔', '正月', '初一']}return this.lunarByBetween(year, this.betweenSolarDays(year, month, day, yearData[1], yearData[2]))},// 還有多少天過節space_festival (fes_yangli) {let tamp_1 = Date.parse(fes_yangli.replace(/-/gi, '/'))let cha = tamp_1 * 1 - this.timestamp * 1if (cha > 0) {return parseInt(cha / (1000 * 60 * 60 * 24))} else {return false}},// 轉換公歷// @param year 陰歷-年// @param month 陰歷-月，閏月處理：例如如果當年閏五月，那么第二個五月就傳六月，相當于陰歷有13個月// @param date 陰歷-日toSolar (year, month, day) {var yearData = this.lunarInfo[year - this.MIN_YEAR]var between = this.betweenLunarDays(year, month, day)var u = navigator.userAgentvar isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios終端var msif (isiOS) {ms = new Date(year + '/' + yearData[1] + '/' + yearData[2]).getTime()} else {ms = new Date(year + '-' + yearData[1] + '-' + yearData[2]).getTime()}var s = ms + between * 24 * 60 * 60 * 1000var d = new Date()d.setTime(s)year = d.getFullYear()month = d.getMonth() + 1day = d.getDate()return [year, this.zeroPad(month), this.zeroPad(day)]},// 是否閏年isLeapYear (year) {return ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))},// 天干地支年lunarYear (year) {var gan = ['庚', '辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己']var zhi = ['申', '酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未']var str = year.toString().split('')return gan[str[3]] + zhi[year % 12]},// 生肖年zodiacYear (year) {var zodiac = ['猴', '雞', '狗', '豬', '鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊']return zodiac[year % 12]},// 農歷月份天數數組lunarMonths (year) {var yearData = this.lunarInfo[year - this.MIN_YEAR]var leapMonth = yearData[0]var bit = (+yearData[3]).toString(2)var months = []for (var i = 0; i < bit.length; i++) {months[i] = bit.substr(i, 1)}for (var k = 0, len = 16 - months.length; k < len; k++) {months.unshift('0')}months = months.slice(0, (leapMonth == 0 ? 12 : 13))for (var i = 0; i < months.length; i++) {months[i] = +months[i] + 29}return months},// 農歷每年的天數// @param year 農歷年份lunarYearDays (year) {var monthArray = this.lunarYearMonths(year)var len = monthArray.lengthreturn (monthArray[len - 1] == 0 ? monthArray[len - 2] : monthArray[len - 1])},lunarYearMonths (year) {var monthData = this.lunarMonths(year)var res = []var temp = 0var yearData = this.lunarInfo[year - this.MIN_YEAR]var len = (yearData[0] == 0 ? 12 : 13)for (var i = 0; i < len; i++) {temp = 0for (let j = 0; j <= i; j++) {temp += monthData[j]}res.push(temp)}return res},// 獲取閏月// @param year 農歷年份leapMonth (year) {var yearData = this.lunarInfo[year - this.MIN_YEAR]return yearData[0]},// 計算農歷日期與正月初一相隔的天數betweenLunarDays (year, month, day) {var yearMonth = this.lunarMonths(year)var res = 0for (var i = 1; i < month; i++) {res += yearMonth[i - 1]}res += day - 1return res},// 計算2個陽歷日期之間的天數// @param year 陽歷年// @param month// @param day// @param l_month 陰歷正月對應的陽歷月份// @param l_day 陰歷初一對應的陽歷天betweenSolarDays (year, month, day, l_month, l_day) {var time1 = new Date(year + '/' + month + '/' + day).getTime()var time2 = new Date(year + '/' + l_month + '/' + l_day).getTime()return Math.ceil((time1 - time2) / 24 / 3600 / 1000)},// 根據距離正月初一的天數計算陰歷日期// @param year 陽歷年// @param between 天數lunarByBetween (year, between) {var lunarArray = []var yearMonth = []var t = 0var e = 0var leapMonth = 0var m = ''if (between == 0) {t = 1e = 1m = '正月'} else {year = between > 0 ? year : (year - 1)yearMonth = this.lunarYearMonths(year)leapMonth = this.leapMonth(year)between = between > 0 ? between : (this.lunarYearDays(year) + between)for (var i = 0; i < 13; i++) {if (between == yearMonth[i]) {t = i + 2e = 1break} else if (between < yearMonth[i]) {t = i + 1e = between - ((yearMonth[i - 1]) ? yearMonth[i - 1] : 0) + 1break}}m = (leapMonth != 0 && t == leapMonth + 1)? ('閏'.this.chineseMonth(t - 1)): this.chineseMonth(((leapMonth != 0 && leapMonth + 1 < t) ? (t - 1) : t))}lunarArray.push(year, t, e) // 年 月 日lunarArray.push(this.lunarYear(year),this.zodiacYear(year),m,this.chineseNumber(e)) // 天干地支年 生肖年 月份 日lunarArray.push(leapMonth) // 閏幾月return lunarArray},// 中文月份chineseMonth (month) {var monthHash = ['', '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '臘月']return monthHash[month]},// 中文日期chineseNumber (num) {var dateHash = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']var res = ''if (num <= 10) {res = '初' + dateHash[num]} else if (num > 10 && num < 20) {res = '十' + dateHash[num - 10]} else if (num == 20) {res = '二十'} else if (num > 20 && num < 30) {res = '廿' + dateHash[num - 20]} else if (num == 30) {res = '三十'}return res},// 日期補零zeroPad (n) {return String(n < 10 ? '0' + n : n)},// 遍歷陰歷中的日期 將農歷轉化為公歷transTime () {this.yangli_arr = []Object.keys(foli).forEach(element => {let y = `${this.timeYear}-${element}`// 拼接年月日let times = y.split('-')// 將年，月，日轉為數組let y1 = this.toSolar(this.timeYear, times[1], times[2]).join('-')this.events[y1] = foli[element]// 節日名稱let obj = {yangli: y1,jieri: foli[element]}this.yangli_arr.push(obj)})setTimeout(() => {this.isShow = true}, 200)}},created () {this.transTime()},mounted () {} } </script><style lang="scss">#calendar-page{width: 100%;.list_box{.festival_detail{margin-top: 20px;background: #ccc;padding: 10px;&.able_festival{background: orange;}}}} </style>

結果預覽：

?

總結

以上是生活随笔為你收集整理的vue节日倒计时列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。