Vue js -根据当前时间显示列表中的元素

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id" v-if="shouldShow(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '元素1', time: '08:00' },
        { id: 2, name: '元素2', time: '12:00' },
        { id: 3, name: '元素3', time: '18:00' },
      ],
    };
  },
  methods: {
    shouldShow(item) {
      const currentTime = new Date();
      const itemTime = new Date(currentTime.toDateString() + ' ' + item.time);
      return currentTime >= itemTime;
    },
  },
};
</script>