完整代码如下:
<template>
  <div>
    <div class="cardBox">
      <div >
        <img class="erweiPhoto" src="../assets/img/微信图片_20201222170418.jpg">
      </div>
      <div style="margin:5px 0 5px 0">
        {{"二维码剩余有效时间"+times+"秒"}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      times: 250,   //倒计时250s,可以任意设定数字
    }
  },
  created() {
    this.getTime();   //只要该页面一渲染创建,就开始倒计时
  },
  methods:{
    getTime() {
      this.timer = setInterval(()=>{
        this.times--
        if(this.times===0){
          clearInterval(this.timer)
        }
      },1000)
    }
  }
}
</script>

<style scoped>
.cardBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 92%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  padding: 15px;
  padding-top: 15px;
}
.erweiPhoto{
  width: 220px;
}
</style>
效果如下:

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐