直播app开发搭建，vue 一分钟倒计时功能实现

直播app开发搭建，vue 一分钟倒计时功能实现

HTML

1	<template><br>  <div @click="countdowm" v-text="content "></div><br></template>

​在data里边定义相关变量

1	data() {<br>    return {<br>      content: "倒计时",<br>      canClick: true,<br>      refreshData: null<br>    };<br>  },

在methods里边定义相关方法

1

methods: {<br>  countdowm() {<br>    let totalTime = 60;<br>    if (!this.canClick) return; //节流<br>    this.canClick = false;<br>    this.content = totalTime + "s后重新倒计时";<br>    this.refreshData = window.setInterval(() => {<br>      totalTime--;<br>      this.content = totalTime + "s后重新倒计时";<br>      if (totalTime < 0) {<br>        //当倒计时小于0时清除定时器<br>        window.clearInterval(this.refreshData); //清除定时器<br>        this.content = "重新开始倒计时";<br>        totalTime = 60;<br>        this.canClick = true; //这里重新开启<br>      }<br>    }, 1000);<br>  }<br>},

 以上就是 直播app开发搭建，vue 一分钟倒计时功能实现，更多内容欢迎关注之后的文章