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>