vue 获取当前时间（并与演出时间对比做出状态改变）

功能需求：

演出预告页面内如果节目正在当前时间段进行，那么时间字段为绿色。如果节目已结束，那么时间字段为灰色。如果节目未开始，那么时间字段为默认黑色。

实现思路：

获取到当前时间获取到数据内节目的开始与结束时间用replace（）方法去除时间段内的符号（:）用slice（）方法截取时间用vue中：class方法结合if else 改变时间段的颜色（状态）

上代码（注释）

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

功能实现~~

谢谢