Vue实现简单日历表

最新推荐文章于 2023-12-13 17:36:49 发布

编程你黄哥

最新推荐文章于 2023-12-13 17:36:49 发布

阅读量740

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67351783/article/details/130590182

版权

<!DOCTYPE html>

<head>

<title>绑定class属性实现日历效果</title>

</head>

<style>

body {

text-align: center;

}

.date-wrap {

width: 510px;

border: 2px solid #4e6ef2;

padding: 15px 0;

border-radius: 16px;

height: 100%;

display: flex;

justify-content: center;

flex-wrap: wrap;

margin: auto;

}

.date-wrap > div {

width: 60px;

height: 50px;

display: flex;

flex-direction: column;

justify-content: center;

border-radius: 6px;

cursor: pointer;

border: 2px solid transparent;

margin: 2px;

}

.date-wrap > div:hover {

border: 2px solid #BDBFC8;

}

.date-wrap > div.head {

font-weight: bold;

height: 40px;

}

.date-wrap > div span:first-child {

font-size: 18px;

}

.date-wrap > div span:last-child {

font-size: 12px;

}

/* 定义绑定的类样式 */

.date-wrap > div.notCurMonth {

opacity: 0.4;

}

.date-wrap > div.curDay {

border: 2px solid #4E6EF2;

}

</style>

<body>

<div id="app">

<h2>2021年8月</h2>

<div class="date-wrap">

<div class="head">一</div>

<div class="head">二</div>

<div class="head">三</div>

<div class="head">四</div>

<div class="head">五</div>

<div class="head">六</div>

<div class="head">日</div>



<div

v-for="item in calendars"

:class="[{'notCurMonth': !isCurrentMonth(item.lunar)}, {'curDay': isCurrentDay(item.lunar)}]"

>

<span>{{item.day}}</span>

<span>{{item.solar}}</span>

</div>

</div>

</div>

</body>

<script>

let vm = new Vue({

el: '#app',

data: {

calendars: [

{lunar: '2021-7-26', solar: '十七'},

{lunar: '2021-7-27', solar: '十八'},

{lunar: '2021-7-28', solar: '十九'},

{lunar: '2021-7-29', solar: '二十'},

{lunar: '2021-7-30', solar: '廿一'},

{lunar: '2021-7-31', solar: '廿二'},

{lunar: '2021-8-1', solar: '建军节'},

{lunar: '2021-8-2', solar: '火把节'},

{lunar: '2021-8-3', solar: '男人节'},

{lunar: '2021-8-4', solar: '廿六'},

{lunar: '2021-8-5', solar: '廿七'},

{lunar: '2021-8-6', solar: '廿八'},

{lunar: '2021-8-7', solar: '立秋'},

{lunar: '2021-8-8', solar: '初一'},

{lunar: '2021-8-9', solar: '初二'},

{lunar: '2021-8-10', solar: '末伏'},

{lunar: '2021-8-11', solar: '初四'},

{lunar: '2021-8-12', solar: '初五'},

{lunar: '2021-8-13', solar: '初六'},

{lunar: '2021-8-14', solar: '七夕节'},

{lunar: '2021-8-15', solar: '初八'},

{lunar: '2021-8-16', solar: '初九'},

{lunar: '2021-8-17', solar: '初十'},

{lunar: '2021-8-18', solar: '十一'},

{lunar: '2021-8-19', solar: '十二'},

{lunar: '2021-8-20', solar: '出伏'},

{lunar: '2021-8-21', solar: '十四'},

{lunar: '2021-8-22', solar: '中元节'},

{lunar: '2021-8-23', solar: '处暑'},

{lunar: '2021-8-24', solar: '十七'},

{lunar: '2021-8-25', solar: '十八'},

{lunar: '2021-8-26', solar: '十九'},

{lunar: '2021-8-27', solar: '二十'},

{lunar: '2021-8-28', solar: '廿一'},

{lunar: '2021-8-29', solar: '廿二'},

{lunar: '2021-8-30', solar: '廿三'},

{lunar: '2021-8-31', solar: '廿四'},

{lunar: '2021-9-1', solar: '廿五'},

{lunar: '2021-9-2', solar: '廿六'},

{lunar: '2021-9-3', solar: '廿七'},

{lunar: '2021-9-4', solar: '廿八'},

{lunar: '2021-9-5', solar: '廿九'},

],

currentDate: '2021-8-18',

curDateObj: {}

},

mounted() {

this.getCalendars()

this.curDateObj = this.getDate(this.currentDate)

},

methods: {

getCalendars() {

this.calendars.forEach(function(ele) {

ele.day = ele.lunar.split('-')[2]

})

},

getDate(date) {

// 为了显示日期方便

let arr = date.split('-')

return { year: arr[0], month: arr[1], day: arr[2] }

},

isCurrentMonth(date) {

let dateObj = this.getDate(date)

return dateObj.year == this.curDateObj.year && dateObj.month == this.curDateObj.month

},

isCurrentDay(date) {

let dateObj = this.getDate(date)

return dateObj.year == this.curDateObj.year && dateObj.month == this.curDateObj.month && dateObj.day == this.curDateObj.day

}

}

})

</script>

</html>

编程你黄哥

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue实现简单日历表

{lunar: '2021-8-14', solar: '七夕节'},{lunar: '2021-8-22', solar: '中元节'},{lunar: '2021-8-1', solar: '建军节'},{lunar: '2021-8-2', solar: '火把节'},{lunar: '2021-8-10', solar: '末伏'},{lunar: '2021-8-11', solar: '初四'},{lunar: '2021-8-19', solar: '十二'},
复制链接

扫一扫