<ul class="date">
<li v-for="(item, index) in list" :key="index" :class="{'bg-color': item.y === year && item.m === month && item.d === day}">
<div class="day" :class="{'text-color': item.cur}">{{item.d}}</div>
<div>哈哈</div>
</li>
</ul>
data () {
return {
year: new Date().getFullYear(), // 今日年份
month: new Date().getMonth() + 1, // 今日月份
day: new Date().getDate(), // 今日日份
currentYear: '', // 当前显示年份
currentMonth: '', // 当前显示月份 0-11,显示时加一
currentDay: '', // 当前显示日份
monthDays: [], // 1-12月的天数
list: []
}
},
mounted () {
this.showCalender()
},
methods: {
isLeap (year) { // 判断是不是闰年
return (year % 100 === 0 ? (year % 400 === 0 ? 1 : 0) : (year % 4 === 0 ? 1 : 0))
},
showCalender (type) {
this.list = []
this.newDate = new Date()
if (!type) this.currentYear = this.newDate.getFullYear()
if (!type) this.currentMonth = this.newDate.getMonth()
this.monthDays = [31, 28 + this.isLeap(this.currentYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
this.currentDay = this.newDate.getDate()
this.firstDay = new Date(`${this.currentYear}-${this.currentMonth + 1}-1`)
this.firstnow = this.firstDay.getDay() // 当月第一日是星期几 1-7
if (this.firstnow === 0) this.firstnow = 7
if (this.firstnow > 1) {
// 前一个月份
let monIndex = this.currentMonth
let year
if (monIndex === 0) {
year--
monIndex = 11
} else {
monIndex--
}
for (let i = 0; i < this.firstnow - 1; i++) {
this.list.unshift({
y: year,
m: monIndex + 1,
d: this.monthDays[monIndex] - i
})
}
}
for (let i = 0; i < this.monthDays[this.currentMonth]; i++) {
// 当前月份
this.list.push({
y: this.currentYear,
m: this.currentMonth + 1,
d: i + 1,
cur: true
})
}
const num = (this.monthDays[this.currentMonth] + this.firstnow - 1) % 7
if (num > 0) {
// 下个月份
let monIndex2 = this.currentMonth
let year2
if (monIndex2 === 11) {
year2++
monIndex2 = 0
} else {
monIndex2++
}
for (let i = 0; i < 7 - num; i++) {
this.list.push({
y: year2,
m: monIndex2 + 1,
d: i + 1
})
}
}
},
preMon () {
if (this.currentMonth === 0) {
this.currentYear--
this.currentMonth = 11
} else {
this.currentMonth--
}
this.showCalender('pre')
},
nextMon () {
if (this.currentMonth === 11) {
this.currentYear++
this.currentMonth = 0
} else {
this.currentMonth++
}
this.showCalender('next')
} // scss 只放了表格样式
ul{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
border-top: 1rpx solid #E9E9E9;
border-left: 1rpx solid #E9E9E9;
li{
flex-grow: 1;
min-width: 44px;
height: 50px;
border-bottom: 1rpx solid #E9E9E9;
border-right: 1rpx solid #E9E9E9;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #999;
font-size: 12px;
.day{
margin-bottom: 6px;
}
.text-color{
color: #222;
}
&.bg-color{
background-color: #E9E9E9;
}
}
}
												

vue简单的日历的更多相关文章

  1. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  2. 【UI插件】简单的日历插件(下)—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  3. 使用JAVA写一个简单的日历

    JAVA写一个简单的日历import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateF ...

  4. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  5. vue简单实现

    vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,

  6. html vue简单

    1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. 基于java实现的简单网页日历功能,有兴趣得可以把它转换到前端实现

    之前做项目的时候,因为要用到不同日期显示不同的内容,就自己做了一个日期的显示和选择功能,今天抽空把以前的代码理了一下,顺便就把之前做的日期功能给拿出来回顾一下,大家可以提点意见,帮忙完善下设计.先上一 ...

  8. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  9. vue初学实践之路——vue简单日历组件(3)

    这一篇我们来实现管理员修改每一天剩余数量的功能. <div id="calendar"> <div id="left"> <spa ...

随机推荐

  1. DAY20 常用模块(三)

    一.加密模块 1.加密方式: 1.有解密的加密方式 2.无解密的加密方式,碰撞检查 1.不同数据加密后的结果一定不一致 2.相同数据的加密结果一定是一致 2.hashlib模块 1.基本使用 ciph ...

  2. Python 进度条原理

    #进度条原理 import sys,time for i in range(50): sys.stdout.write("#")#标准输出 #若不能够按照时间一个一个依次显示,则代 ...

  3. tomcat 中项目配置文件统一目录设置

    在tomcat 安装目录中 conf 下的  catalina.properties 文件中 有个  shared.loader= 配置为   shared.loader="${catali ...

  4. laravel框架安装Curl扩展

    然后进入根目录执行命令     composer update 完毕.

  5. Eclipse安装TestNG

    1.在Eclipse中点击Help菜单,选择Install New Software选项,在弹出页面中输入安装地址即可安装. http://beust.com/eclipse 2. 3. 4. 等待T ...

  6. mockjs在vue中的使用

    mockjs在vue中的使用 安装好vue-cli后 加载模块: npm install mockjs 创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置 ...

  7. The innodb_system data file 'ibdata1' must be writable

    在安装MySQL的时候报的错,我理解的这个错是因为有个文件是Innodb需要在安装MySQL(或者创建数据库的时候)的时候需要写入这个文件,但是他现在没有写的权限. 日志中的错误是: 5.7版本以前是 ...

  8. [NOIP2014D1]

    T1 Problem 洛谷 Solution 一道非常裸的模拟题.直接枚举每次猜拳就可以了. Code #include<cmath> #include<cstdio> #in ...

  9. Python2.x爬虫入门之URLError异常处理

    大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: (1)网络无连接,即本机无法上网 (2)连 ...

  10. C# [WIN32] [API] Global Hook

    NativeMethods.cs: using System; using System.Runtime.InteropServices; namespace GlobalHook { interna ...