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

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}