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

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

先看单个倒计时：

代码：

<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:"",//单倒计时