啊里巴巴倒计时案例

如下完成代码:

<template>
  <div class="approvals-container">
   <div class="box">

     <div class="dd">
       <h2 class="h22">杭州市通用5元卷</h2>
     <p>杭味面馆</p>
     </div>
    
     <div class="box1" @click="fn">{{count === 0 ?name:count+'s'}}</div>
   </div>
  </div>
</template>

<script>
export default {
  name: 'Approvals',
  data() {
    return {
        // 定时器
            count:3,
            name:'抢购',
            name1:'已抢购',
       
    };
  },
  mounted () {
    
   let timr=  setInterval(()=>{
      if(this.count===0) return clearInterval(timr)
      this.count--
      
    },1000)

  },
  
  methods:{
fn() {
  console.log(11);
this.name = this.name1
}
  }

}
</script>

<style>
.box{
margin: 50px 0 0 100px;
  height: 136px;
  width: 360px;
  background-color: #ffeded;
  display: flex;
}
.h22{
  font-size: 22px;
  padding-left: 20px;
  padding-top: 30px;
}
p {
  padding-left: 20px;
  color: #8e8483;
  margin-top: -14px;
}
.box1{
  margin-top: 50px;
  width: 80px;
  height: 30px;
  border-radius: 5px;
  color: #fff;
  background-color: #ff4242;
  text-align: center;
  line-height: 30px;
}
.dd{
  width: 260px;
  height: 50px;

}
</style>