vue.js實現日歷插件使用方法詳解
今天要實現的功能就是以下這個功能:vue.js模擬日歷插件
好瞭廢話不多說瞭 直接上代碼瞭
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開始 i從1開始--> <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 有三個參數: 1,年 2.月 3.默認是1 如果是0,表示上個月最後一天 - 前兩天 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('上個月長度'+lastMonthLength); // this.month = parseInt(this.month); //每個月的上一個月是哪一年的那一個月 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; //補零函數 // function toTwo(n) { // return n < 10 ? '0' + n : n; // } function buling(n) { return n.toString().length > 1 ? n.toString() : '0' + n.toString(); } // 補充上個月的最後幾天 while(nowMonthFirstWeek--){ arr.unshift({ day:lastMonthLength, cur:true, fullDay:`${pyear}-${buling(pmonth)}-${buling(lastMonthLength)}` }); lastMonthLength-- } console.log(arr); //本月天數 var _a = 1; while(nowMonthLength--){ arr.push({ day:_a, cur:false, fullDay:`${this.year}-${buling(this.month)}-${buling(_a)}` }); _a++ } //下個月補全 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文件, 才能正常運行哦!!!
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。