vue多个倒计时vue倒计时vue列表倒计时(单个,列表倒计时,秒杀)vue渲染列表倒计时

最新推荐文章于 2024-08-07 10:54:29 发布

就像风1样

最新推荐文章于 2024-08-07 10:54:29 发布

阅读量8.7k

点赞数 4

分类专栏： Vue vue专栏文章标签：倒计时多个倒计时 vue倒计时

本文链接：https://blog.csdn.net/qq_42221334/article/details/87864020

版权

本文展示了如何在Vue中实现单个和多个倒计时，特别是针对列表倒计时的处理。作者提供了代码示例，强调在数据获取后设置定时器每秒更新，并在每个Djs_timeList方法中计算剩余时间。对于多个倒计时，通过for循环传递截止时间到方法中。此外，还提到在路由跳转后销毁定时器的注意事项。

摘要由CSDN通过智能技术生成

先看效果图！代码分别在下面展示

先看单个倒计时：

代码：

<div class="titRight">
        <div class="top">
          <p>{
  {detailsListDetails.cate1_name1}}</p>
          <p>还有{
  {detailsListDetails.project_number4}}头未有人预约计划</p>
        </div>
        <div class="bottom" v-if="ifCountDown==0">
          <p>您还有</p>
          <p style="font-size: 22px;">{
  {CountDown}}</p>
          <p>可以预约计划</p>
        </div>
        <div class="bottom" v-if="ifCountDown!=0">
          <p>抱歉</p>
          <p style="font-size: 22px;">预约已截止</p>
        </div>
</div>

export default {
    name: "verShops",
    data() {
      return {
        user_collect_type:"",//收藏
        token_centent:JSON.parse(sessionStorage.getItem("loginInformation")),//token
        status_type:"",//预约状态
        status_message1:"",//预约显示的文字
        CountDown:"",//单倒计时