vue实现选择一个时间段 比之前早的时间不能点击

选择一个时间段的思路

如图

 

部分代码如下

<template>
  <div class="biji">
   
   <div class="span" v-for="(item,index) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]"
    :key="index" 
    @click="click(item)"
    :class="(rilimouth<=nowmouth&&item<now)?'noclick':(item<=keyArr[1]&&item>=keyArr[0])||(item==clickitem)?'active':''">
     {{item}}
   </div>

  </div>
</template>

<script>
  export default {
    name: 'Biji',
    data() {
      return {
       keyArr:[],
       clickitem:0,
       rilimouth:7,   //控制日历上的月份
       nowmouth:7,    //实际的月
       now:9,
      }
    },
    created() {

    },
    computed: {},

    methods: {
     click(item){
       this.clickitem=item;
       if(this.keyArr.length>=2){
         this.keyArr=[];
       }
       this.keyArr.push(item);
       if(this.keyArr[0]>this.keyArr[1]){
         this.keyArr.reverse();
       }
       console.log(this.keyArr)
     }
    }

  }

</script>

<style scoped lang="scss">
  @import "../common/common";
.span{
  width: 1rem;
  height: 1rem;
  background: pink;
  float: left;
  text-align: center;
  line-height: 1rem;
  &.active{
    background: orange;
  }
  &.noclick{
    pointer-events: none;
    background: #ccc;
  }
}
</style>