vue实现简单的日历

最新推荐文章于 2024-10-14 17:10:52 发布

西瓜爱打字

最新推荐文章于 2024-10-14 17:10:52 发布

阅读量2.2k

点赞数

文章标签：大数据 javascript 前端 vue.js 前端框架

本文链接：https://blog.csdn.net/m0_59226489/article/details/125810476

版权

本文分享了使用Vue2框架实现一个简单日历组件的代码，适用于前端开发中需要日历功能的情况，直接复制粘贴即可使用。

摘要由CSDN通过智能技术生成

废话不多说直接上代码！这代码是vue2来写的，我这套代码就是一个组件，有需要的直接复制粘贴即可！

<template>
	<!-- 外部 -->
	<div class="waibu">
		<!-- 头部 -->
		<div class="title">
			<span class="let" @click="shang"><</span>
			<div>
				{
  {this.currentyear}}年{
  {this.currentmonth}}月{
  {this.currentday}}
			</div>
			<span class="rig" @click="xia">></span>
		</div>
		
		
		<!-- 周一到周日 -->
		<div class="zoumo">
			<p v-for="item in sun">{
  {item}}</p>
		</div>
		<div class="box">
			<!-- 上个月剩余天数 -->
			<p class="sy" v-for="item in shanggeyue" :key="'a'+item">{
  {item}}</p>
			<!-- 当前月份 -->
			<p v-for="item in danqianyue" :key&