SOURCE

const MAX_COUNT = 50;
const MIN_COUNT = 2;
const DEFAULT_COUNT = 10;

const myContainer = new Vue({
    el: "#my_container",
    data: {
        count: DEFAULT_COUNT,
        totalLetters: [],
        isBegin: false,
        letters: []
    },
    watch: {
        count(val) {
            if ((val != '' && !isNaN(val))) {
                this.count = parseInt(val, 10);
            }
        }
    },
    methods: {
        _getRandomLetter: function () {
            let min = 0;
            let max = this.totalLetters.length;
            return Math.floor(Math.random() * (max - min)) + min;
        },
        _checkInput: function () {
            if ((this.count != '' && !isNaN(this.count))) {
                if (this.count > MAX_COUNT) {
                    alert('不能超过限制最大数：' + MAX_COUNT);
                    this.count = DEFAULT_COUNT;
                    return false;
                } else if (this.count < MIN_COUNT) {
                    alert('不能小于限制最小数：' + MIN_COUNT);
                    this.count = DEFAULT_COUNT;
                    return false;
                }
            } else {
                alert('请输入有效数字');
                this.count = DEFAULT_COUNT;
                return false;
            }
            return true;
        },
        resetLetters: function () {
            this.totalLetters = [];
            this.letters = [];
            this.isBegin = false;
            this.count = DEFAULT_COUNT;
        },
        nextLetter: function () {
            if (!this._checkInput()) {
                return;
            }

            if (!this.isBegin) {
                for (let i = 0; i < this.count; i++) {
                    this.totalLetters.push(i)
                }
                this.isBegin = true;
            }
            if (this.totalLetters.length === 0) {
                alert('已完成');
                return;
            }
            let idx = this._getRandomLetter();

            this.letters.push(this.totalLetters[idx]);
            this.totalLetters.splice(idx, 1);
        }
    }
})

<div id="my_container">
    <div class="input_count_container">
        <label for="count">最大数字：</label><input id="count" type="text" min="1" max="120" v-model="count"  />
    </div>
	<div class="btn-container">
		<input type="button" v-on:click="nextLetter" value="下一个" />
		<input type="reset"  value="重置"  v-on:click="resetLetters" />
    </div>

    <article>
        <div id="letters">
            <ol>
                <li v-for="k in letters" :key="k">
                    {{ (k+1) }}
                </li>
            </ol>
        </div>
    </article>
</div>

body {
    text-align: center;
    font-size: 120%;
}

.btn-container {
    margin: 0 auto;
}

.btn-container input {
    margin: 1rem;
    width: 6rem;
    line-height: 3rem;
    height: 3rem;
}

li {
    line-height: 2rem;
}

li.big_letter {
    color: red;
}

li.small_letter {
    color: blue;
}

.input_count_container {
    text-align: left
}

.input_count_container label {
    font-size: 150%;
    line-height: 2rem;
    vertical-align: middle;
}

.input_count_container input {
    line-height: 2rem;
}

#letters li:nth-child(odd) {
    color: red;
}

#letters li:nth-child(even) {
    color: blue;
}