在vue2.0项目中一个简单的倒计时功能

公司3月底有一个运动会项目，项目中有一项是平板支撑，参加比赛的人会通过扫二维的方式进入到报名页面，我们的页面会投到比赛现场的大屏幕上，当主持人说预备_{，我则在页面上点击开始按钮，然后大屏幕上就会出现倒计时3} 2~ 1~，之后主持人说开始，大屏幕上就开始计时。当最后一个坚持的人倒下了，就是全场坚持最久的人的秒数。

// 以下是html 代码 ------------ 

// 以下是 css 代码 ------------
 

// 以下是js代码 ------------
 export default{
        data(){
            return {
                timer: 0,
                si: '',
                isShareCount: false,
                isShowTimer: false,
                isShowBtn: true,
            }
        },
        methods: {
            // 比赛开始，计时开始
            startTimer(){
                let self = this;
                this.si = setInterval(function () {
                    self.timer++;
                }, 1000);
            },
            // 比赛结束，停止计时
            stopTimer(){
                let self = this;
                clearInterval(self.si);
            },
            //显示倒数秒数
            showTime(countdown){
                let self = this;
                self.isShareCount = true;
                self.isShowBtn = false;
                self.isShowFalseBtn = true;
                document.getElementById('showtimes').innerHTML = countdown;
                if (countdown == 0) {
                    self.isShareCount = false;
                    self.isShowTimer = true;
                    self.isShowFalseBtn = false;
                    document.getElementById('showtimes').innerHTML = "";
                    // 计时器开始计时
                    self.startTimer();
                } else {
                    countdown -= 1;
                    setTimeout(function () {
                        self.showTime(countdown);
                    }, 1000);
                }
            }
        }
    }