请教一下时间段的循环怎么实现

Question

10点15分--10点30分，时间隔15分依次往后排。如何实现循环展示

该如何实现

Answer 1

用js生成数据源数组就行了，用Date对象循环setMinutes增加15分钟，直到超过结束时间，简单示例如下

<div id="app">
    <div v-for="item in ranges">
        {{item}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Number.prototype.addZero = function () { if (this < 10) return '0' + this; return this.toString()}
    new Vue({
        el: '#app',
        data: {ranges:[]},
        created() {
            var d = new Date(),endDate=new Date();
            d.setHours(10); d.setMinutes(0);//开始时间 10:00
            endDate.setHours(12); endDate.setMinutes(0);//12:00结束
            var step = 15;
            while (true) {
                var s = '今天 ' + d.getHours().addZero() + ':' + d.getMinutes().addZero();
                d.setMinutes(d.getMinutes() + step);
                s += '-' + d.getHours().addZero() + ':' + d.getMinutes().addZero();
                if (d > endDate) break;
                this.ranges.push(s)

            }
            
            
        }
    })
    var d = new Date()
    d.setMinutes()

</script>