vue写日历

心血来潮 想要用vue自己个一个日历，于是就写着玩玩了，（注：蓝色块表示当前日期，红点表示未签到，蓝点表示已签到，由于我注释了查询签到日的代码所以看到的都是红点）

先来看看效果吧

实现界面基本布局html代码如下：

实现页面布局的css代码如下：

.content
		position:absolute
		width:100%
		top:1.5rem
		bottom:0
		padding:0.4rem 0
		background:#f2f2f2
		.calendar
			width:100%
			background:#bcd5f8
			text-align:center
			line-height:1rem
			color:#333
			padding:0.6rem
			.calendar-header
				width:100%
				height:1rem
				line-height:1rem
				padding:0 0.8rem
				font-size:0.56rem
				font-weight:700
				white-space:nowrap
				display:flex
				justify-content:space-between
				i
					display:block
					width:1rem
					height:1rem
					line-height:1rem
				p
					font-size:0.56rem
			.calendar-body
				width:100%
				font-size:0.5rem
				tr:first-child
					font-size:0.3rem
					color:#8392a8
				tr
					white-space:nowrap
					display:flex
					justify-content:space-between
					margin-top:0.15rem
					td
						display:block
						width:1.5rem
					.isToday
						font-size:0.6rem
						color:#fff	
						span
							display:block
							margin:0 auto
							width:0.9rem
							height:0.9rem
							border-radius:0.1rem
							background:#1574f3
							box-shadow: 0 1px 0 1px #1a42e1
					.sign
						position:relative
						span:before
							content:''
							display:block
							position:absolute
							top:-0.07rem
							left:0.66rem
							width:0.18rem
							height:0.18rem
							border-radius:50%
					.isSign
						span:before
							background:#1574f3
					.notSign
						span:before
							background:#f7110c

实现功能的js代码如下：

好啦 一个简单的日历就完成了，是不是很简单呢