vue —— 带农历的日历功能

闲来无事做一些简单功能,一边练习VUE的使用,一边锻炼逻辑思维能力。之前有个项目需要自己写一个月份选择器,由此想起来做一个简单的日历,做起来有一些自己感兴趣的东西,也为了记录一下,发个帖

首先,我做的日历是没有农历的,因为我不知道农历的历法是怎么计算的,从网上找了一个似乎是很多年前的代码,功能不错,代码太乱就自己整理了一下,当然这段代码还是归写代码的大神所有,跟我没啥关系,特此声明

1、分享代码

Html代码

<template>
  <div class="main">
    <div class="choose_year">
      <div class="icon" @click="chooseYears(-1)"><i class="fa fa-angle-double-left"></i></div>
      <div class="icon" @click="chooseMonth(-1)"><i class="fa fa-angle-left"></i></div>
      <div class="date">{
  {year}}.{
  {month.toString().padStart(2, '0')}}</div>
      <div class="icon" @click="chooseMonth(1)"><i class="fa fa-angle-right"></i></div>
      <div class="icon" @click="chooseYears(1)"><i class="fa fa-angle-double-right"></i></div>
    </div>
    <div class="days_area">
      <div class="day week" v-for="week in weeks" :key="week">{
  {week}}</div>
      <div class="day" @click="chooseThisDay(day.gregorian)" v-for="(day, index) in days" :key="index" :class="day.gregorian === today ? 'choose_day' : ''">
        <p>{
  
  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值