首页使用vue3生成随机数九宫格

使用vue3生成随机数九宫格

时间: 2024-03-26 19:33:17 浏览: 17

使用Vue3生成随机数九宫格可以通过以下步骤实现： 1. 创建一个Vue实例，并引入Vue3的库文件。 2. 在Vue实例中定义一个data属性，用于存储九宫格的数据。 3. 使用Vue的生命周期钩子函数created，在实例创建完成后生成随机数，并将其存储在data属性中。 4. 在Vue模板中使用v-for指令遍历data属性，生成九宫格的格子。 5. 使用CSS样式美化九宫格的外观。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Random Number Grid</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <div class="grid"> <div v-for="number in numbers" :key="number" class="grid-item">{{ number }}</div> </div> </div> <style> .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .grid-item { background-color: #ccc; padding: 20px; text-align: center; } </style> <script> const app = Vue.createApp({ data() { return { numbers: [], }; }, created() { this.generateNumbers(); }, methods: { generateNumbers() { // 生成1到9的随机数 const randomNumbers = Array.from({ length: 9 }, () => Math.floor(Math.random() * 9) + 1); this.numbers = randomNumbers; }, }, }); app.mount('#app'); </script> </body> </html> ```