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

<template>
 <div>
 <MonthChooser 
 :year="year" 
 :month="month" 
 :setYear="setYear" 
 :setMonth="setMonth"
 >
 </MonthChooser>
 <MonthView :year="year" :month="month"></MonthView>
 </div>
</template>
<script>
 import MonthView from "./components/MonthView.vue";
 import MonthChooser from "./components/MonthChooser.vue";
 export default {
 data(){
 return{
 year :2018,
 month:8,
 }
 },
 components :{
 MonthView,
 MonthChooser
 },
 methods : {
 setYear(year){
 this.year = year; //设置年
 },
 setMonth(month){
 this.month = month; //设置月
 }
 }
 }
</script>

<template>
 <div>
 <h1>
 <button @click="goPrev()">-</button>
 <a href="###">{{year}}</a> 年{{month}}月
 <button @click="goNext()">+</button>
 </h1>
 </div>
</template>
<script>
 export default {
 props:["year","month","setYear","setMonth"],
 methods :{
 goNext(){
  if(this.month < 12){
  // 如果月份小于12，可以加月
  this.setMonth(this.month + 1)
  }else{
  // 否则就加年，并且重设下年为1月
  this.setMonth(1)
  this.setYear(this.year + 1)
  }
 },
 goPrev(){
  if(this.month > 1){
  // 如果月份大于1月，可以减月
  this.setMonth(this.month - 1)
  }else{
  // 否则就减年，并且重设上年为12月
  this.setMonth(12); //重设为12月
  this.setYear(this.year - 1); //减年
  }
 }
 }
 }
</script>

<template>
 <div>
 <MonthChooser
 :year="year"
 :month="month"
 :setYear="setYear"
 :setMonth="setMonth"
 ></MonthChooser>
 <MonthView :year="year" :month="month"></MonthView>
 <DecadeView :year="year" :setYear="setYear"></DecadeView>
 </div>
</template>
<script>
 import MonthView from "./components/MonthView.vue";
 import MonthChooser from "./components/MonthChooser.vue";
 import DecadeView from "./components/DecadeView.vue";
 export default {
 data(){
 return {
 ...
 }
 },
 components : {
 MonthView,
 MonthChooser,
 DecadeView
 },
 methods : {
 ...
 }
 }
</script>

<template>
 <div>
 <table>
 <tr v-for="i in 10">
 <!-- <td v-for="j in arr.slice((i-1) * 3, i * 3)"> -->
 <td v-for="j in 3" :class="{'cur':year == showYear(i, j)}" 
@click="setYear(showYear(i, j))"
>
  {{showYear(i, j)}}
 </td>
 </tr>
 </table>
 </div>
</template>
<script>
 export default {
 props : ["year"],
 computed : {
 arr(){
 var _arr = [];
 //计算年份的头
 var tou = this.year - this.year % 10 - 10;
 //从得到的年份的头开始循环 + 30
 for(var i = tou ; i < tou + 30;i++){
  _arr.push(i); 
 }
 return _arr;
 }
 },
 methods : {
 showYear(i , j){
 return this.arr[(j - 1) * 10 + (i - 1)]
 }
 }
 }
</script>
<style>
 .cur{color:red;font-weight:bold;}
</style>