<template>
<div class="calendar">
<div class="top">
<p>
<span @click="reduceYear"><<</span>
<span @click="reduceMonth"><</span>
</p>
<p>{
{year}}年{
{conversion(month)}}月</p>
<p>
<span @click="addMonth">></span>
<span @click="addYear">>></span>
</p>
</div>
<ul class="week">
<li v-for="(item,index) in weekList" :key="index">{
{item}}</li>
</ul>
<ul>
<li class="lastMonth" v-for="(item,index) in lastMonthDays" :key="index+31">
<p>{
{item}}</p>
<p>{
{month-1>0?toLunar(year, month-1, item):toLunar(year-1, 12, item)}}</p>
</li>
<li
class="nowMonth"
:class="{mark:item===markDay}"
v-for="(item,index) in nowMonthDays"
:key="index+62"
@click="changeDay(item)"
>
<p>{
{item}}</p>
<p>{
{toLunar(year, month, item)}}</p>
</li>
<li class="nextMonth" v-for="(item,index) in nextMonthDays" :key="index">
<p>{
{item}}</p>
<p>{
{toLunar(year, month+1, item)}}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
year: null,
month: null,
day: null,
markDay: null,
weekList: ["日", "一", "二", "三", "四", "五", "六"],
lastMonthDays: [],
nowMonthDays: [],
vue日历组件
最新推荐文章于 2024-07-29 20:40:56 发布
本文介绍了如何使用Vue.js框架创建一个功能完善的日历组件,包括日历的展示、日期选择、事件绑定等功能。通过实例代码解析,帮助读者理解Vue组件化开发的思想。
摘要由CSDN通过智能技术生成