vue.js實現日曆外掛使用方法詳解
阿新 • • 發佈:2021-09-05
今天要實現的功能就是以下這個功能:.模擬日曆外掛
好了廢話不多說了 直接上程式碼了
:
*{ 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 calehttp://www.cppcns.comnder.length / 7" > <td www.cppcns.comv-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-www.cppcns.com-){
arr.push({
day:_a,cur:false,fullDay:`${this.year}http://www.cppcns.com-${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,fullDay:`${nyear}-${buling(nmonth)}-${buling(_a)}`
});
_a++
}
return arr;
}
}
})
注意:需要先引入你本地的vue.js檔案, 才能正常執行哦!!!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。