vue获取当前时间（与演出时间做出状态比较）

<template>
  <div>
    <div class="">
      演出时间预告：
    </div>
    <!-- 这里只判断time_data数据中下标为0的时间段，其他时间段未做判断 -->
    <p :class="{cls:underway,clss:finished}">{{time_data[0].start}}-{{time_data[0].end}}</p>
    <p>{{time_data[1].start}}-{{time_data[1].end}}</p>
    <p>{{time_data[2].start}}-{{time_data[2].end}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        underway: '',
        finished: '',
        getTime: '',
        time_data: [{
            id: 1,
            name: '孔雀开屏',
            start: '12:00:00',
            end: '14:00:00'
          }, {
            id: 2,
            name: '猴子上树',
            start: '08:00:00',
            end: '10:00:00'
          },
          {
            id: 3,
            name: '蚂蚁搬家',
            start: '20:00:00',
            end: '22:00:00'
          }
        ]
      }
    },
    methods: {
      getCurrentTime() {
        //获取当前时间并打印
        var _this = this;
        // let yy = new Date().getFullYear();年获取
        // let mm = new Date().getMonth() + 1;月获取
        // let dd = new Date().getDate();日获取
        let hh = new Date().getHours();
        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
        // _this.getTime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss;/
        _this.getTime = hh + ':' + mf + ':' + ss;
        console.log(_this.getTime); //打印获取到的时间
        let get_time = _this.getTime.replace(':', ''); //去除 ：符号
        console.log(get_time);
        let begin_ = this.time_data[0].start.replace(':', ''); //去除数组time_data中下标为0的开始时间中的：符号
        console.log(begin_);
        let end_ = this.time_data[0].end.replace(':', ''); //去除数组time_data中下标为0的结束时间中的：符号
        console.log(end_);
        let get_time1 = get_time.slice(0, 4); //截取前四位时间数
        console.log(get_time1);
        let begin_1 = begin_.slice(0, 4);
        console.log(begin_1);
        let end_1 = end_.slice(0, 4);
        console.log(end_1);
        // 如果当前时间大于等于开始时间且小于等于结束时间,（代表当前时间是表演时间，）那么这个类为真,就为它添加类名为cls的这个类,否则就不添加
        if (get_time1 >= begin_1 && get_time1 <= end_1) {
          this.underway = true;
        } else {
          this.underway = false;
        };
        // 如果当前时间大于等于开始时间且大于等于结束时间,（代表表演已结束，）那么这个类为真,就为它添加类名为cls的这个类,否则就不添加
        if (get_time1 >= begin_1 && get_time1 >= end_1) {
          this.finished = true;
        } else {
          this.finished = false;
        }
        console.log(this.underway);
      },
    },
    mounted() {
      this.getCurrentTime();
    }
  }
</script>
<style>
  .cls {
    color: green;
  }
  .clss {
    color: gainsboro;
  }
</style>