一、日历组件
new Date()的月份是从0开始的。
下面表达式是：2018年6月1日
new Date(2018, 5, 1);下面表达式是：2018年5月1日
new Date(2018, 4, 1);
或
new Date(2018, 5-1, 1);
下面表达式是：2018年5月31日（得到上个月的最后一天）
new Date(2018, 5 , 0);
日的参数可以是0，也可以是负数，表示上个月底的那一天。
下面表达式是：2018年7月01日
new Date(2018, 5, 31);
lApp.vue父组件：
<template>
<div>
<MonthView :year="year" :month="month"></MonthView>
</div>
</template>
<script>
import MonthView from "./components/MonthView.vue";
export default {
data(){
return {
year : 2018 ,
month : 8 ,
}
},
components : {
MonthView
},
methods : {
}
}
</script>lMonthView.vue子组件
<template>
<div>
月视图{{year}} {{month}}
{{arr}}
</div>
</template>
<script>
export default {
props : ["year" , "month"],
computed : {
arr(){
//计算日历的数组：三要素
//本月1号星期几
var this1DayWeek = new Date(this.year, this.month - 1, 1).getDay();
// 本月有几天
var thisMonthDay = new Date(this.year, this.month, 0).getDate();
// 上月有多少天
var prevMonthDay = new Date(this.year, this.month - 1, 0).getDate(); console.log(benyue1haoxingqiji)
console.log(benyueyoujitian)
console.log(shangyueduoshaotian)
}
}
}
</script>
l显示在页面：
<template>
<div>
<table>
<tr v-for="i in 6">
<td v-for="j in arr.slice((i-1) * 7, i * 7)">
{{j}}
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
props:["year","month"],
computed : {
arr(){
var _arr = []; //存储42天的数组 // 计算日历的数组：三要素
//本月1号星期几，根据星期几得到上个月剩余天数
var this1DayWeek = new Date(this.year, this.month-1, 1).getDay();
//上个月有多少天
var prevMonthDay = new Date(this.year, this.month-1, 0).getDate();
//本月有几天
var thisMonthDay = new Date(this.year, this.month, 0).getDate();
//用本月1号星期几，推断出上月的剩余天数
for(var i = 0; i < this1DayWeek;i++){
_arr.unshift(prevMonthDay - i)
}
//循环本月天数（累加），从数组末尾插入
for(var i = 1; i <= thisMonthDay;i++){
_arr.push(i)
