console 命令行工具 X clear

console


var app = new Vue({
    el: '#app',
    data: {
        start:'02:00',
        end:'23:00',
        items: []
    },
    methods: {
        greet: function () {
           this.items= this.getHours(this.start, this.end);
        },
        // 计算时间列表
        getHours: function (start, end) {
            start = this.pattern(start);
            end = this.pattern(end);
            var res = [this.add0(start.getHours()) + ':' + this.add0(start.getMinutes())]
            while (start.getTime() < end.getTime()) {
                start.setMinutes(start.getMinutes() + 30);
                res.push(this.add0(start.getHours()) + ':' + this.add0(start.getMinutes()))
            }
            return res;
        },
        // 补0
        add0: function (m) {
            return m < 10 ? '0' + m : m
        },
        // 格式化
        pattern: function (hours) {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth();
            var d = date.getDay();
            return new Date(y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + hours + ':00');
        }
    }
})

<html>
<header></header>

<body>
	<div id="app">
		<input v-model="start"><im>~</im><input  v-model="end">
        <button @click='greet'>生成</button>
        <ul>
            <li v-for="item in items" :key="item">
                {{ item }}
            </li>
        </ul>
    </div>
</body>
</html>

ul li{
    list-style-type:none
}

本项目引用的自定义外部资源

vue.js