2024-05-11

<template>
    <div id="app">

        <button @click="generateRandomNumbers">生成随机号码</button>
        <ul>
            <li v-for="number in randomNumbers" :key="number">{{ number }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                maxNumber: 80, // 范围是1到80
                numCount: 10, // 随机生成的号码数量
                randomNumbers: [],
            }
        },
        mounted() {

        },
        methods: {

            generateRandomNumbers() {

                const selectedNumbers = new Set();

                while (selectedNumbers.size < this.numCount) {
                    const randomNum = Math.floor(Math.random() * this.maxNumber) + 1;
                    selectedNumbers.add(randomNum);
                }

                this.randomNumbers = Array.from(selectedNumbers).sort((a, b) => a - b);
                
            },

        }
    }
</script>

<style scoped="scoped">
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
</style>