SOURCE

//const BIG_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const SMALL_LETTERS = 'abcdefghijklmnopqrstuvwxyz';
const DEFAULT_COUNT = 26;

const generateLetters = function (min = 'a', max = 'z') {
    let maxIdx = SMALL_LETTERS.indexOf(max.toLowerCase());
    let minIdx = SMALL_LETTERS.indexOf(min.toLowerCase());
    let _small_letters = SMALL_LETTERS.substring(minIdx, maxIdx + 1);
    return _small_letters.toUpperCase().concat(_small_letters);
};

const IS_BIGGER_LETTER = function (s) {
    return SMALL_LETTERS.toUpperCase().includes(s);
}

const myContainer = new Vue({
    el: "#my_container",
    data: {
        isBegin: false,
        count: DEFAULT_COUNT,
        minLetter: 'a',
        maxLetter: 'z',
        totalLetters: '',
        letters: {}
    },
    methods: {
        _getRandomLetter: function (charters = this.totalLetters) {
            return charters.charAt(Math.floor(Math.random() * charters.length));
        },
        resetLetters: function () {
            this.totalLetters = '';
            this.isBegin = false;
            this.count = DEFAULT_COUNT;
            this.maxLetter = 'z';
            this.minLetter = 'a';
            this.letters = {};
        },
        nextLetter: function () {
            if (!this.isBegin) {
                this.totalLetters = generateLetters(this.minLetter, this.maxLetter);
                this.isBegin = true;
            }
            if (Object.keys(this.letters).length == this.count) {
                alert('已完成');
                return;
            }
            if (this.totalLetters.length < 1) {
                alert('没更多的字母了');
                return;
            }
            let s = this._getRandomLetter();
            if (!(s in this.letters)) {
                this.letters[s] = IS_BIGGER_LETTER(s);
                this.totalLetters = this.totalLetters.replace(s, '');
                this.letters = Object.assign({}, this.letters);
            }
        }
    }
})

<div id="my_container">
	<div class="field">
		<label for="letter_count">个数：</label><input id="letter_count" max="2" type="text" 
        :disabled="isBegin" v-model="count" />
    </div>
    <div class="field">
        <label for="min_letter">最小字母：</label><input id="min_letter" max="1" type="text" 
        :disabled="isBegin" v-model="minLetter" />
    </div>
    <div class="field">
        <label for="max_letter">最大字母：</label><input id="max_letter" max="1" type="text" 
        :disabled="isBegin" v-model="maxLetter" />
    </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 Object.keys(letters)"
                 v-bind:class="letters[k]?'big_letter':'small_letter'">
                    {{ k }}
                </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;
}

.field input {
    padding: 3px 1rem;
    font-size: 100%;
    width: 3rem;
}

input#max_letter,
input#min_letter {
    margin-top: 1rem;
}