Vue、Javascript——展示近三年的数据

效果：
默认的当年数据，左右箭头点击时分别加减一年

写法一：

<i class="el-icon-edit" @click="goLeft" v-show="yearIndex == 1 || yearIndex == 2"></i>
	 <span> {{ new Date().getFullYear() - 2 }}</span>
	 <span> {{ new Date().getFullYear() - 1 }}</span>
	 <span> {{ new Date().getFullYear()}}</span>
 <i class="el-icon-edit" @click="goRight" v-show="yearIndex == 0 || yearIndex == 1"></i>

data(){
 return{
   yearIndex: new Date().getFullYear(),
     }
},
computed: {
    year() {
      switch (this.yearIndex) {
        case 0:
          return new Date().getFullYear() - 2;
        case 1:
          return new Date().getFullYear() - 1;
        case 2:
          return new Date().getFullYear();
      }
    }
  },
  methods:{
	 goRight() {
	      ++this.yearIndex;
	    },
    goLeft() {
      --this.yearIndex;
    },
}



uni-app：
写法二：
<view class="switch flex-data">
      <uni-icons type="left" color="#999" size="20" @click="leftClick(typeTime)" :class="[showOnly === true ? 'form-onlyed' : '']"></uni-icons>
      <text class="data">{{ typeTime }}</text>
      <uni-icons type="right" color="#999" size="20" @click="rightClick(typeTime)" :class="[isShow === true ? 'form-onlyed' : '']"></uni-icons>
    </view>

data(){
 return:{
 	  showOnly: false,
      isShow: false,
      typeTime: new Date().getFullYear(),
}
},
methods:{

leftClick(v) {
      let newYear = new Date().getFullYear();
      let rightYear = newYear - 2;
      if (this.typeTime === rightYear) {
        this.showOnly = true;
        return;
      }
      this.typeTime--;
      this.getData();
    },
 rightClick(v) {
      let newYear = new Date().getFullYear();
      if (this.typeTime === newYear) {
        this.isShow = true;
        return;
      }
      this.typeTime++;
      this.getData();
    },
}