Question

我要显示的脚本是

on-click

显示价值观的HTML代码

const workHour = "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM".split(',').map((val) => { 
  const obj = val.split(':');
  const time = val.replace(`${obj[0]}:`, '');
  return {
    day: obj[0],
    time,
  }
});
console.log(workHour);

通过这个，我可以显示日期和工作时间。我需要改变今天工作时间的颜色并明天自动更新吗？有谁可以帮忙解决问题？

Answer 1

请尝试以下代码

if if

 <td v-for="(item,key) in workHr" :key="key">
    <span v-if="new Date().getDay()-1==key" class="today">{{item.time}}</span>
    <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.time}}</span>
    <span v-else >{{item.time}}</span>
 </td>

使用类对象

<span :class="{'tomorrow':new Date().getDay()==key,'today':new Date().getDay()-1==key}">{{item.time}}</span>

如果条件演示：https://jsfiddle.net/50wL7mdz/76096/

类对象演示：https://jsfiddle.net/50wL7mdz/77860/

我怎样才能在vue js中以不同的颜色显示今天的工作时间？

1 个答案: