使用时间戳定时切换显示内容或定时隐藏按钮

时间戳查询地址

https://tool.lu/timestamp/

默认显示

到期显示

代码实现：

<template>
  <div class="golden-top-award">  
 <!-- 报名参评 -->
          <div
            class="register-for-evaluation-btn flex-center-center"
            @click="goSignUp"
            v-if="!showEndRegistration"
          >
            点击报名参评
          </div>
          <!-- 结束报名参评 -->
          <div
            v-else
            class="register-for-evaluation-btn-disabled"
            @click="endRegistration"
          >
            报名参评已结束
          </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
   showEndRegistration: false, //是否显示参评结束按钮，false显示报名参评按钮，true则显示报名参评已结束按钮
};
},
 methods: {
    // 时间戳到期截止
    getTime() {
      // 当前时间的时间戳
      let currentTime = Math.round(new Date() / 1000);
      // 1668571200为2022-11-16 12:00:00的时间戳
      //当前时间戳大于截止的时间戳则显示参评结束按钮
      if (currentTime > 1668571200) {
        this.showEndRegistration = true;
      }
    },
},
  created() {
    this.getTime();//进入就调此方法，放mounted（）方法里会出现按钮闪动情况
  },
};
</script>
<style scoped>
//1rem=100px，可自行转换
.register-for-evaluation-btn {
    width: 4.14rem;
    height: 0.64rem;
    background: rgba(7, 67, 234, 1);
    border-radius: 0.04rem;
    font-size: 0.2rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.02rem;
    cursor: pointer;
    margin: 0 auto;
  }
  .register-for-evaluation-btn-disabled {
    width: 4.14rem;
    height: 0.64rem;
    background: #909090;
    border-radius: 0.04rem;
    line-height: 0.74rem;
    text-align: center;
    font-size: 0.2rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.02rem;
    cursor: pointer;
    margin: 0 auto;
  }
</style>