使用Vue實現(xiàn)簡單日歷效果
更新時間：2022年08月30日 16:26:23 作者：風(fēng)葉翩翩
這篇文章主要為大家詳細(xì)介紹了使用Vue實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用Vue實現(xiàn)簡單的日歷，供大家參考，具體內(nèi)容如下
原理分析：
1.獲取當(dāng)前時間
2.顯示當(dāng)前時間
3.點擊增加和減少月份
4.大月和小月的天數(shù)
效果演示
初始樣式（顯示現(xiàn)在的日期時間）
增加一個月
在程序開始之前一定注意：
引入Vue.js架包
代碼演示
Body內(nèi)容
<script type="text/x-template" id="calendar">
?? <!-- 年份-->
?? ?? ?<div id="year">
?? ??? ? ? ? ??<!--月份 -->
?? ??? ? ? ? ? ? ? ?<div class="month">
?? ??? ? ? ? ? ? ? ? ? ?<ul>
?? ??? ? ? ? ? ? ? ? ? ? ? ?<li class="arrow" @click="pickPre(currentYear,currentMonth)">?</li>
?? ??? ? ? ? ? ? ? ? ? ? ? ?<li class="year-month" @click="pickYear(currentYear,currentMonth)">
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?<span class="choosen-year" style="color:blue">{{ currentYear }}</span>
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?<span class="choosen-month" style="color:blue">{{ currentMonth }}月</span>
?? ??? ? ? ? ? ? ? ? ? ? ? ?</li>
?? ??? ? ? ? ? ? ? ? ? ? ? ?<li class="arrow" @click="pickNext(currentYear,currentMonth)">?</li>
?? ??? ? ? ? ? ? ? ? ? ?</ul>
?? ??? ? ? ? ? ? ? ?</div>
?? ??? ? ? ? ? ? ? ?<!-- 星期 -->
?? ??? ? ? ? ? ? ? ?<ul class="weekdays">
?? ??? ? ? ? ? ? ? ? ? ?<li>一</li>
?? ??? ? ? ? ? ? ? ? ? ?<li>二</li>
?? ??? ? ? ? ? ? ? ? ? ?<li>三</li>
?? ??? ? ? ? ? ? ? ? ? ?<li>四</li>
?? ??? ? ? ? ? ? ? ? ? ?<li>五</li>
?? ??? ? ? ? ? ? ? ? ? ?<li style="color:red">六</li>
?? ??? ? ? ? ? ? ? ? ? ?<li style="color:red">日</li>
?? ??? ? ? ? ? ? ? ?</ul>
?? ??? ? ? ? ? ? ? ?<!-- 日期 -->
?? ??? ? ? ? ? ? ? ?<ul class="days">
?? ??? ? ? ? ? ? ? ? ? ?<!-- 循環(huán)-->
?? ??? ? ? ? ? ? ? ? ? ?<li v-for="dayobject in days">
?? ??? ? ? ? ? ? ? ? ? ? ? ?<!--本月-->
?? ??? ?
?? ??? ? ? ? ? ? ? ? ? ? ? ?<span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>
?? ??? ?
?? ??? ? ? ? ? ? ? ? ? ? ? ?<!--判斷天數(shù)是否正確-->
?? ??? ? ? ? ? ? ? ? ? ? ? ?<span v-else>
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?<!--今天-->
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?<span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?class="active">{{ dayobject.day.getDate() }}</span>
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?<span v-else>{{ dayobject.day.getDate() }}</span>
?? ??? ? ? ? ? ? ? ? ? ? ? ?</span>
?? ??? ?
?? ??? ? ? ? ? ? ? ? ? ?</li>
?? ??? ? ? ? ? ? ? ?</ul>
?? ??? ? ? ? ? ?</div>
?? ??? ? ? ?</script>
<div id="app">
?? ? ?<calendar></calendar>
</div>CSS樣式
* {
?? ??? ? ? ?margin: 0;
?? ??? ? ? ?padding: 0;
?? ??? ?}
?? ??? ?
?? ??? ?
?? ??? ?/*日歷*/
?? ??? ?
?? ??? ?#calendar {
?? ??? ? ? ?width: 98%;
?? ??? ? ? ?border: 2px solid #A4A7B0;
?? ??? ? ? ?height: 335px;
?? ??? ? ? ?margin-left: 0.5%;
?? ??? ?}
?? ??? ?
?? ??? ?.month {
?? ??? ? ? ?width: 92%;
?? ??? ? ? ?height: 48px;
?? ??? ? ? ?border: 2px solid #FFFFFF;
?? ??? ? ? ?margin-left: 3%;
?? ??? ? ? ?margin-top: 20px;
?? ??? ?}
?? ??? ?
?? ??? ?.month ul {
?? ??? ? ? ?margin: 0;
?? ??? ? ? ?padding: 0;
?? ??? ? ? ?display: flex;
?? ??? ? ? ?margin-top: 11px;
?? ??? ? ? ?justify-content: space-between;
?? ??? ?}
?? ??? ?
?? ??? ?.year-month {
?? ??? ? ? ?flex-direction: column;
?? ??? ? ? ?align-items: center;
?? ??? ? ? ?justify-content: space-around;
?? ??? ?}
?? ??? ?
?? ??? ?.choosen-year {
?? ??? ? ? ?padding: 0 20px;
?? ??? ? ? ?font-size: 16px;
?? ??? ? ? ?font-weight: 200;
?? ??? ?}
?? ??? ?
?? ??? ?.choosen-month {
?? ??? ? ? ?text-align: center;
?? ??? ? ? ?font-size: 16px;
?? ??? ? ? ?font-weight: 200;
?? ??? ?}
?? ??? ?
?? ??? ?.arrow {
?? ??? ? ? ?width: 3%;
?? ??? ? ? ?height: 25px;
?? ??? ?}
?? ??? ?
?? ??? ?.arrow1 {
?? ??? ? ? ?background: url(left.png) no-repeat 0 0 /100% 100%;
?? ??? ? ? ?margin-left: 44px;
?? ??? ?}
?? ??? ?
?? ??? ?.arrow2 {
?? ??? ? ? ?background: url(right.png) no-repeat 0 0 /100% 100%;
?? ??? ? ? ?margin-right: 44px;
?? ??? ?}
?? ??? ?
?? ??? ?.month ul li {
?? ??? ? ? ?color: #999;
?? ??? ? ? ?font-size: 20px;
?? ??? ? ? ?text-transform: uppercase;
?? ??? ? ? ?letter-spacing: 3px;
?? ??? ? ? ?list-style: none;
?? ??? ?}
?? ??? ?
?? ??? ?.weekdays {
?? ??? ? ? ?margin: 0;
?? ??? ? ? ?color: #FFFFFF;
?? ??? ? ? ?background: #A4A7B0;
?? ??? ? ? ?width: 96.6%;
?? ??? ? ? ?margin-top: 26px;
?? ??? ? ? ?height: 34px;
?? ??? ? ? ?line-height: 34px;
?? ??? ? ? ?margin-left: 2.2%;
?? ??? ?}
?? ??? ?
?? ??? ?.weekdays li {
?? ??? ? ? ?display: inline-block;
?? ??? ? ? ?text-align: center;
?? ??? ? ? ?color: #11616f;
?? ??? ? ? ?font-size: 14px;
?? ??? ? ? ?font-weight: 100;
?? ??? ? ? ?width: 12.7%;
?? ??? ?}
?? ??? ?
?? ??? ?.days {
?? ??? ? ? ?padding: 0;
?? ??? ? ? ?margin: 0;
?? ??? ? ? ?display: flex;
?? ??? ? ? ?flex-wrap: wrap;
?? ??? ? ? ?justify-content: space-around;
?? ??? ?}
?? ??? ?
?? ??? ?.days li {
?? ??? ? ? ?list-style-type: none;
?? ??? ? ? ?display: inline-block;
?? ??? ? ? ?width: 14.2%;
?? ??? ? ? ?text-align: center;
?? ??? ? ? ?padding-bottom: 3px;
?? ??? ? ? ?padding-top: 7px;
?? ??? ? ? ?font-size: 12.78px;
?? ??? ? ? ?color: rgb(14, 220, 235);
?? ??? ? ? ?font-weight: 200;
?? ??? ?}
?? ??? ?
?? ??? ?.days li span span {
?? ??? ? ? ?height: 29.5px;
?? ??? ? ? ?width: 27px;
?? ??? ? ? ?line-height: 29.5px;
?? ??? ? ? ?display: inline-block;
?? ??? ?}
?? ??? ?
?? ??? ?.days li .class-30 {
?? ??? ? ? ?background: url(bg_30.png) no-repeat 0 0 /100% 100%;
?? ??? ?}
?? ??? ?
?? ??? ?.days li .class-60 {
?? ??? ? ? ?background: url(bg_60.png) no-repeat 0 0 /100% 100%;
?? ??? ?}
?? ??? ?
?? ??? ?.days li .class-3060 {
?? ??? ? ? ?background: url(bg_3060.png) no-repeat 0 0 /100% 100%;
?? ??? ?}
?? ??? ?
?? ??? ?.days li .other-month {
?? ??? ? ? ?padding: 5px;
?? ??? ? ? ?color: #84a8ae;
?? ??? ?}Vue.js內(nèi)容
Vue.component("calendar", {
?? ??? ??? ?template: "#calendar",
?? ??? ??? ?data: function() {
?? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ?currentDay: 1,
?? ??? ??? ??? ??? ?currentMonth: 1,
?? ??? ??? ??? ??? ?currentYear: 1970,
?? ??? ??? ??? ??? ?currentWeek: 1,
?? ??? ??? ??? ??? ?days: [],
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?created() {
?? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ?that.initData(null);
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?initData: function(cur) {
?? ??? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ??? ?let leftcount = 0;
?? ??? ??? ??? ??? ?let date;
?? ??? ??? ??? ??? ?if (cur) {
?? ??? ??? ??? ??? ??? ?date = new Date(cur);
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?let now = new Date();
?? ??? ??? ??? ??? ??? ?let d = new Date(that.formatDate(now.getFullYear(), now.getMonth(), 1));
?? ??? ??? ??? ??? ??? ?d.setDate(35);
?? ??? ??? ??? ??? ??? ?date = new Date(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?that.currentDay = date.getDate();
?? ??? ??? ??? ??? ?that.currentYear = date.getFullYear();
?? ??? ??? ??? ??? ?that.currentMonth = date.getMonth() + 1;
?? ??? ??? ??? ??? ?that.currentWeek = date.getDay(); // 1...6,0
?? ??? ??? ??? ??? ?if (that.currentWeek == 0) {
?? ??? ??? ??? ??? ??? ?that.currentWeek = 7;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?let str = that.formatDate(that.currentYear, that.currentMonth, that.currentDay);
?? ??? ??? ??? ??? ?that.days.length = 0;
?? ??? ??? ??? ??? ?//初始化
?? ??? ??? ??? ??? ?for (let i = that.currentWeek - 1; i >= 0; i--) {
?? ??? ??? ??? ??? ??? ?let d = new Date(str);
?? ??? ??? ??? ??? ??? ?d.setDate(d.getDate() - i);
?? ??? ??? ??? ??? ??? ?let dayobject = {};?
?? ??? ??? ??? ??? ??? ?dayobject.day = d;
?? ??? ??? ??? ??? ??? ?that.days.push(dayobject);?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?for (let i = 1; i <= 35 - that.currentWeek; i++) {
?? ??? ??? ??? ??? ??? ?let d = new Date(str);
?? ??? ??? ??? ??? ??? ?d.setDate(d.getDate() + i);
?? ??? ??? ??? ??? ??? ?let dayobject = {};
?? ??? ??? ??? ??? ??? ?dayobject.day = d;
?? ??? ??? ??? ??? ??? ?that.days.push(dayobject);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?pickPre: function(year, month) {
?? ??? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ??? ?let d = new Date(that.formatDate(year, month, 1));
?? ??? ??? ??? ??? ?d.setDate(0);
?? ??? ??? ??? ??? ?that.initData(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
?? ??? ??? ??? ?},
?? ??? ??? ??? ?pickNext: function(year, month) {
?? ??? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ??? ?let d = new Date(that.formatDate(year, month, 1));
?? ??? ??? ??? ??? ?d.setDate(35);
?? ??? ??? ??? ??? ?that.initData(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
?? ??? ??? ??? ?},
?? ??? ??? ??? ?pickYear: function(year, month) {
?? ??? ??? ??? ??? ?alert(year + "," + month);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?// 返回 類似 2016-01-02 格式的字符串
?? ??? ??? ??? ?formatDate: function(year, month, day) {
?? ??? ??? ??? ??? ?let y = year;
?? ??? ??? ??? ??? ?let m = month;
?? ??? ??? ??? ??? ?if (m < 10) m = "0" + m;
?? ??? ??? ??? ??? ?let d = day;
?? ??? ??? ??? ??? ?if (d < 10) d = "0" + d;
?? ??? ??? ??? ??? ?return y + "-" + m + "-" + d
?? ??? ??? ??? ?},
?? ??? ??? ?}
?? ??? ?})
?? ??? ?let vm = new Vue({
?? ??? ??? ?el: '#app',
?? ??? ?})到此程序結(jié)束。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js組件vue-waterfall-easy實現(xiàn)瀑布流效果
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)瀑布流之vue-waterfall-easy的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
相信現(xiàn)在很多人都是用Vue做過了各種項目,但是項目代碼做完和上線并不代表這結(jié)束,還有上線以后的優(yōu)化也是很重要的一點,這篇文章主要給大家介紹了關(guān)于Vue項目優(yōu)化打包的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度
這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家介紹了Vue中內(nèi)置指令與自定義指令語法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
在Vue的模板語法中,我們學(xué)了很多指令,當(dāng)然除了這些指令,Vue也允許我們自己定義自己的指令,所以本文就來和大家聊聊如何使用自定義指令吧2023-10-10
在web項目開發(fā)的過程中,經(jīng)常會遇到客服端重復(fù)發(fā)送請求的場景,下面這篇文章主要給大家介紹了關(guān)于Vue路由切換和Axios接口取消重復(fù)請求的相關(guān)資料,需要的朋友可以參考下2022-05-05
uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條功能
這篇文章主要介紹了uni-app自定義導(dǎo)航欄按鈕|uniapp仿微信頂部導(dǎo)航條,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue如何截取字符串，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue的過渡動畫，主要是transition標(biāo)簽的使用，配合css動畫實現(xiàn)的。接下來通過本文給大家分享Vue運用transition實現(xiàn)過渡動畫效果，感興趣的朋友一起看看吧2019-05-05
vue3?elmentPlus?table實現(xiàn)列寬可拖拽功能
這篇文章主要介紹了vue3?elmentPlus?table實現(xiàn)列寬可拖拽功能，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08