Javascript 使用Vue递增格式化计时器

我正在构建一个基本的计时器Vue组件。计时器以秒为单位递增，用户可以在单击时播放和暂停计时器。以下是组件：

<template>
    <div v-bind:class="{workspaceTimer: isRunning}">
        <a class="u-link-white" href="#" @click="toggleTimer">
            {{ time }}
            <span v-if="isRunning">
                Pause
            </span>
            <span v-else>
                Play
            </span>
        </a>
    </div>
</template>

<script>
    export default {
        props: ['order'],
        data() {
            return {
                time: this.order.time_to_complete,
                isRunning: false,
                interval: null,
            }
        },
        watch: {
            time: function (newTime) {
                this.saveTime()
            }
        },
        methods: {
            toggleTimer() {
                if (this.isRunning) {
                    clearInterval(this.interval);
                } else {
                    this.interval = setInterval(this.incrementTime, 1000);
                }
                this.isRunning = !this.isRunning;
            },
            incrementTime() {
                this.time = parseInt(this.time) + 1;
            },
            formattedTime() {
                var sec_integer = parseInt(this.time, 10);
                var hours   = Math.floor(sec_integer / 3600);
                var minutes = Math.floor((sec_integer - (hours * 3600)) / 60);
                var seconds = sec_integer - (hours * 3600) - (minutes * 60);

                if (minutes < 10) {minutes = "0"+minutes;}
                if (seconds < 10) {seconds = "0"+seconds;}
                this.time = +minutes+':'+seconds;
            },
            saveTime: _.debounce(
                function () {
                    var self = this;
                    axios.put(location.pathname, {time_to_complete: self.time})
                    .then(function (response) {
                        console.log('timer: ' + response.data.time_to_complete);
                    })
                    .catch(function (error) {
                        console.log('Error: ' + error);
                    })
                },
                1000
            )

    }
</script>

filters: {
    formattedTime: function (value) {
        var sec_num = parseInt(value, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        //if (hours   < 10) {hours   = "0"+hours;}
        if (minutes < 10) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}
        return +minutes+':'+seconds;
    }
},

导出默认值{
道具：[“订单”]，
数据（）{
返回{
时间：此。订单。完成时间，
isRunning:false，
间隔：空，
}
},
观察：{
时间：函数（newTime）{
这是saveTime（）
}
},
方法：{
切换计时器（）{
如果（此.isRunning）{
clearInterval（这个.interval）；
}否则{
this.interval=setInterval（this.incrementTime，1000）；
}
this.isRunning=！this.isRunning；
},
递增时间（）{
this.time=parseInt（this.time）+1；
},
格式化时间（）{
var sec_integer=parseInt（这个时间为10）；
var小时=数学下限（秒整数/3600）；
var分钟=数学楼层（（秒整数-（小时*3600））/60）；
var秒=秒整数-（小时*3600）-（分钟*60）；
如果（分钟<10）{minutes=“0”+分钟；}
如果（秒<10）{seconds=“0”+秒；}
this.time=+分钟+'：'+秒；
},
保存时间：u.debounce(
函数（）{
var self=这个；
put（location.pathname，{time\u to\u complete:self.time}）
.然后（功能（响应）{
console.log（'timer:'+response.data.time_to_complete'）；
})
.catch（函数（错误）{
console.log（'错误：'+错误）；
})
},
1000
)
}

我将第二个计数写成一个整数，但希望将第二个计数显示为mm:ss，并将该值的增量格式化，例如，从00:59递增到1:00

---

我可以使用方法或计算属性轻松格式化第二个值（请参见该示例中的

formattedTime（）

方法），但我不确定如何递增该字符串，然后格式化递增的字符串。是否需要监视该字符串的更改，然后格式化更新的字符串？

解决了这个问题。答案实际上是在我的组件中使用本地筛选器：

<template>
    <div v-bind:class="{workspaceTimer: isRunning}">
        <a class="u-link-white" href="#" @click="toggleTimer">
            {{ time }}
            <span v-if="isRunning">
                Pause
            </span>
            <span v-else>
                Play
            </span>
        </a>
    </div>
</template>

<script>
    export default {
        props: ['order'],
        data() {
            return {
                time: this.order.time_to_complete,
                isRunning: false,
                interval: null,
            }
        },
        watch: {
            time: function (newTime) {
                this.saveTime()
            }
        },
        methods: {
            toggleTimer() {
                if (this.isRunning) {
                    clearInterval(this.interval);
                } else {
                    this.interval = setInterval(this.incrementTime, 1000);
                }
                this.isRunning = !this.isRunning;
            },
            incrementTime() {
                this.time = parseInt(this.time) + 1;
            },
            formattedTime() {
                var sec_integer = parseInt(this.time, 10);
                var hours   = Math.floor(sec_integer / 3600);
                var minutes = Math.floor((sec_integer - (hours * 3600)) / 60);
                var seconds = sec_integer - (hours * 3600) - (minutes * 60);

                if (minutes < 10) {minutes = "0"+minutes;}
                if (seconds < 10) {seconds = "0"+seconds;}
                this.time = +minutes+':'+seconds;
            },
            saveTime: _.debounce(
                function () {
                    var self = this;
                    axios.put(location.pathname, {time_to_complete: self.time})
                    .then(function (response) {
                        console.log('timer: ' + response.data.time_to_complete);
                    })
                    .catch(function (error) {
                        console.log('Error: ' + error);
                    })
                },
                1000
            )

    }
</script>

filters: {
    formattedTime: function (value) {
        var sec_num = parseInt(value, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        //if (hours   < 10) {hours   = "0"+hours;}
        if (minutes < 10) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}
        return +minutes+':'+seconds;
    }
},

过滤器：{
formattedTime:函数（值）{
var secu_num=parseInt（值，10）；
var小时=数学楼层（秒数/3600）；
var分钟=数学楼层（（秒数-（小时*3600））/60）；
var秒=秒数-（小时*3600）-（分钟*60）；
//如果（小时<10）{hours=“0”+小时；}
如果（分钟<10）{minutes=“0”+分钟；}
如果（秒<10）{seconds=“0”+秒；}
返回+分钟+'：'+秒；
}
},

---

然后将该筛选器应用于我的时间变量：

{{time | formattedTime}

time

应为整数，以秒为单位计数。

formattedTime

应为整数