vue--创建日历
![](https://img2022.cnblogs.com/blog/2170636/202211/2170636-20221110014435112-1657338950.png)
css使用
tailwindcss
<script src="https://cdn.tailwindcss.com"></script>
全部代码
<template> <div class="m-auto"> <h1 class="text-2xl my-2 text-center">Vue Calendar</h1> <div class="mx-2 flex justify-between"> <h2 class="font-bold">{{currentMonthName}}</h2> <h2 class="font-bold">{{currentYear}}</h2> </div> <section class="flex"> <p class="text-center" style="width:14.28%" v-for="day in days" :key="day">{{day}}</p> </section> <section class="flex flex-wrap"> <p class="text-center" style="width:14.28%" v-for="num in startDay()" :key="num"></p> <p class="text-center" style="width:14.28%" v-for="num in daysInMonth()" :key="num" :class="currenDateClass(num)">{{num}}</p> </section> <section class="flex justify-between my-4"> <button class="px-2 border rounded" @click="prev()">Prev</button> <button class="px-2 border rounded" @click="next()">Next</button> </section> {{currentDate}} </div> </template> <script> export default { data(){ return{ currentDate:new Date().getUTCDate(), currentMonth:new Date().getMonth(), currentYear:new Date().getFullYear(), days:['Sun','Mon','Tue','Wed','Thu','Fir','Sat'] } }, methods:{ daysInMonth(){ // const month=new Date().getMonth()+1; return new Date(this.currentYear,this.currentMonth+1,0).getDate(); }, startDay(){ return new Date(this.currentYear,this.currentMonth,1).getDay(); }, next(){ if(this.currentMonth==11){ this.currentMonth=0; this.currentYear++; }else{ this.currentMonth++; } }, prev(){ if(this.currentMonth==0){ this.currentMonth=11; this.currentYear--; }else{ this.currentMonth--; } }, currenDateClass(num){ console.log(new Date(this.currentYear,this.currentMonth,num).toDateString()); console.log(new Date()); const calenderFullDate=new Date(this.currentYear,this.currentMonth,num).toDateString(); const currentFullDate=new Date().toDateString() return calenderFullDate==currentFullDate?'text-yellow-600':''; } }, computed:{ currentMonthName(){ return new Date(this.currentYear,this.currentMonth).toLocaleString('default',{month:'long'}) } } } </script> <style> </style>