Vue中UI组件库之Vuex与虚拟服务器初识

下面表达式是：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);

<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>

<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>

<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)
 }

 //补充下月的天数（满42天为止）
 var i = 1;
 while(_arr.length != 42){
  _arr.push(i++);
 }
 
 return _arr;
 }
 }
 }
</script>

<template>
 <div>
 <h1>月视图 {{year}}年{{month}}月</h1>
 <table>
 <tr>
 <th>日</th>
 <th>一</th>
 <th>二</th>
 <th>三</th>
 <th>四</th>
 <th>五</th>
 <th>六</th>
 </tr>
 <tr v-for="i in 6">
 <td v-for="j in arr.slice((i-1) * 7, i * 7)">
  <p class="p1">{{j.d}}</p>
  <p class="p2">{{j.n}}</p>
 </td>
 </tr>
 </table>
 </div>
</template>
<script>
 import solarLunar from 'solarLunar';
 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({
  d: prevMonthDay - i,
  n: solarLunar.solar2lunar(this.year, this.month-1, prevMonthDay - i).dayCn
  })
 }
 
 //循环本月天数，累加，从数组末尾插入
 for(var i = 1; i <= thisMonthDay;i++){
  _arr.push({
  d: i,
  n: solarLunar.solar2lunar(this.year, this.month, i).dayCn
  })
 }

 //补充下个月的天数（满42天为止）
 var i = 1;
 while(_arr.length != 42){
  _arr.push({
  d : i,
  n : solarLunar.solar2lunar(this.year, this.month+1, i).dayCn
  });
  i++;
 }
 console.log(_arr)
 return _arr;
 }
 }
 }
</script>