vue.js實(shí)現(xiàn)日歷插件使用方法詳解
今天要實(shí)現(xiàn)的功能就是以下這個(gè)功能:vue.js模擬日歷插件
好了廢話不多說(shuō)了 直接上代碼了
css:
*{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #app{ width: 1000px; margin: 10px auto; } .calender{ width: 1000px; } .calender table{ width: 1000px; } .calender table,th,tr,td{ border:1px solid #333333; border-collapse: collapse; } .calender td{ height: 100px; vertical-align: top; text-align: left; padding: 5px 0 0 5px; font-size: 13px; } .calender td.cur{ color:red; }
html:
<div id="app"> <div class="calender"> <table> <caption> <select v-model.number="year"> <option v-for="i of 490">{{i+1969}}</option> </select> <select v-model.number="month"> <option v-for="i of 12">{{i}}</option> </select> </caption> <thead> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> </thead> <tbody> <!--index 從0開(kāi)始 i從1開(kāi)始--> <tr v-for="(a,index) of calender.length / 7" > <td v-for="i of 7" :class="{cur:calender[index * 7 + (i - 1)].cur }">{{calender[index * 7 + (i - 1)].fullDay}}</td> </tr> </tbody> </table> </div> </div>
js:
var vm = new Vue({ el:'#app', data:{ year:2018, month:1 }, computed:{ calender(){ var arr = []; //new data 有三個(gè)參數(shù): 1,年 2.月 3.默認(rèn)是1 如果是0,表示上個(gè)月最后一天 - 前兩天 3 后天 var nowMonthLength = new Date(this.year,this.month,0).getDate(); var nowMonthFirstWeek = new Date(this.year,this.month-1).getDay(); var lastMonthLength = new Date(this.year,this.month-1,0).getDate(); console.log('本月有:'+nowMonthLength); console.log('本月第一天'+nowMonthFirstWeek); console.log('上個(gè)月長(zhǎng)度'+lastMonthLength); // this.month = parseInt(this.month); //每個(gè)月的上一個(gè)月是哪一年的那一個(gè)月 var pmonth = this.month == 1 ? 12 : this.month - 1; //上一年 var pyear = this.month == 1 ? this.year - 1 :this.year; //下一月 var nmonth = this.month == 12 ? 1 : this.month + 1; //下一月 var nyear = this.month == 12 ? this.year + 1 : this.year; //補(bǔ)零函數(shù) // function toTwo(n) { // return n < 10 ? '0' + n : n; // } function buling(n) { return n.toString().length > 1 ? n.toString() : '0' + n.toString(); } // 補(bǔ)充上個(gè)月的最后幾天 while(nowMonthFirstWeek--){ arr.unshift({ day:lastMonthLength, cur:true, fullDay:`${pyear}-${buling(pmonth)}-${buling(lastMonthLength)}` }); lastMonthLength-- } console.log(arr); //本月天數(shù) var _a = 1; while(nowMonthLength--){ arr.push({ day:_a, cur:false, fullDay:`${this.year}-${buling(this.month)}-${buling(_a)}` }); _a++ } //下個(gè)月補(bǔ)全 var nextLength = arr.length > 35 ? 42 - arr.length : 35 - arr.length; _a = 1; while (nextLength--){ arr.push({ day:_a, cur:true, fullDay:`${nyear}-${buling(nmonth)}-${buling(_a)}` }); _a++ } return arr; } } })
注意:需要先引入你本地的vue.js文件, 才能正常運(yùn)行哦!!!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue watch響應(yīng)數(shù)據(jù)實(shí)現(xiàn)方法解析
這篇文章主要介紹了Vue watch響應(yīng)數(shù)據(jù)實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07vue :src 文件路徑錯(cuò)誤問(wèn)題的解決方法
這篇文章主要介紹了vue :src 文件路徑錯(cuò)誤問(wèn)題的簡(jiǎn)單解決方法,本文分步驟給大家介紹的非常詳細(xì),感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05vue項(xiàng)目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能的相關(guān)資料,開(kāi)發(fā)中我們需要地圖定位,就是用戶輸入位置,自動(dòng)定位獲取經(jīng)緯度,需要的朋友可以參考下2023-08-08遇到vue前端npm?i報(bào)錯(cuò)多個(gè)版本不一致問(wèn)題及解決
這篇文章主要介紹了遇到vue前端npm?i報(bào)錯(cuò)多個(gè)版本不一致問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue中,在本地緩存中讀寫(xiě)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue中,在本地緩存中讀寫(xiě)數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios,然后項(xiàng)目就用到了,所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料,文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹,方法大家理解學(xué)習(xí),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12Vue3實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue3實(shí)現(xiàn)簡(jiǎn)單的轉(zhuǎn)盤(pán)抽獎(jiǎng)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的可以了解一下2023-10-10