如果本文帮助到你，本人不胜荣幸，如果浪费了你的时间，本人深感抱歉。

项目线上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节日倒计时列表相关推荐

1. python绘制圣诞树、烟花、爱心及节日倒计时

   说明: 该博客主要完成以下几个方面的功能: 1.元旦节日倒计时代码的实现 2.使用python源码"绘制圣诞树" 3.使用python绘制"跨年烟花" 4.使用 ...

2. html 倒计时特效,JS节日倒计时特效(精确到毫秒)

   JS节日倒计时特效(精确到毫秒)-时间特效-网页特效-站长新动力-msxindl.com function show_djs(){ var djs = document.getElementById( ...

3. 基于ruoyi+vue+elementUI实现列表，新增，附件上传，tab+springBoot+mybatis+oracle序列+批量新增

   基于ruoyi+vue+elementUI实现列表,新增,附件上传,tab+springBoot+mybatis+oracle序列+批量新增 页面效果 列表页面 新增页面 详情页面 代码实现 列表+新 ...

4. vue实现商城列表渲染

   需求:         利用vue实现商城列表渲染 所需数据如下: mockData: [{"id": 1,"img": "https://img13 ...

5. 如何实现vue中的列表动画，如何封装vue动画

   文章目录 一.vue中的列表动画如何实现 列表动画原理: 二.vue中如何封装动画 第1个版本:css动画版 第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现 举个例子: 列表动画原理 ...

6. vue实现倒计时定时器

   前言 本文章将发布vue实现倒计时定时器,可用于考试系统自动交卷.商城未付款倒计时取消订单等效果 同时,如不清楚vue时间处理,可查看我上一个文章 vue时间处理 倒计时定时器 为了制作倒计时定时器, ...

7. vue 在v-for列表动态添加ref，并获取对应元素

   vue 在v-for列表动态添加ref,并获取对应元素 vue中的ref对于操作dom非常方便,可以直接通过给div加ref,在方法里通过this.$refs.ref的name获取 <templ ...

8. Vue 条件渲染 列表绚烂 双向数据处理

   Vue 条件渲染 列表绚烂 双向数据处理 文章目录 Vue 条件渲染 列表绚烂 双向数据处理 1.style和class 2.条件渲染 3.列表渲染 3.1.v-for 循环数组,循环字符串,数字对象 ...

9. vue评论点赞列表点赞，点击哪个哪个状态改变

   vue评论点赞列表点赞,点击哪个哪个状态改变 后台数据如下: { "body":{ "host":null, "code":200, &qu ...

最新文章

1. java 密钥工厂 desede_20145212 实验五《Java网络编程》
2. greenplum 数据库如何增加列_Greenplum行存与列存的选择以及转换方法-阿里云开发者社区...
3. 在Ubuntu 14.04 64bit上安装Valgrind并检查内存泄露
4. Repeater 嵌套
5. Spring中应用反射机制浅析
6. python3.6+pytorch-cpu+Pycharm环境下的PyTorch配置方法
7. 借助C/C++进行Android开发：NDK的配置与使用
8. iptables的地址取反操作
9. 用区块链改变人工智能：去中心化带来数据新范式
10. c语言 异或_编程入门：C语言基础知识全网超全不用到处找了!(文末附清单)
11. c#中connect函数_Flink算子使用方法及实例演示：union和connect
12. ZooKeeper 典型应用场景有哪些？
13. （转）微信公众平台开发02-接收信息及回复信息
14. 关于http协议详解（摘）
15. HCI实验之问卷设计
16. 三款免费好用的Gif制作神器
17. php和python的选择排序算法,基于python的七种经典排序算法的详细介绍
18. 零成本赚钱小项目，轻松操作，完整版笔记分享给你
19. 12星座谈恋爱：说分手，很容易
20. 证件照修改尺寸像素大小和存储大小

热门文章

1. EduCoder实践课程——Python零基础到精通 参考答案(七）
2. android 和 iphone x,看看iPhone X与这几款安卓旗舰手机的对比
3. 求臻医学文章发表：NF1胚系新突变潜在提示胃肠道多发肿瘤风险
4. CG CTF 南邮CTF SQL注入2
5. 【无标题】分享我的三次审稿意见
6. 恶意注册微信或违法；支付宝回应“勒索病毒”；ofo 退押金按钮变成灰色 | 极客头条...
7. 金秋月圆，学习礼包“WAIC可信隐私计算论坛”完整视频已上架！请查收～
8. 【备注】【C42】《编写高质量代码：改善Python程序的91个建议》PDF
9. 一节计算机课日记,一节公开课日记500字,公开课日记
10. ntp服务器linux（服务端和客户端）配置