首页循环三次出现三个div盒子用vue

循环三次出现三个div盒子用vue

时间: 2023-08-10 08:05:14 浏览: 164

在 Vue.js 中，你可以使用 `v-for` 指令来循环创建三个 div 盒子。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .box { width: 100px; height: 100px; background-color: red; margin-bottom: 10px; } </style> </head> <body> <div id="app">  <div class="box" v-for="index in 3" :key="index"></div> </div> <script> new Vue({ el: '#app', data: { } }) </script> </body> </html> ``` 这段代码会生成三个红色的 div 盒子，并且它们之间有 10px 的间距。你可以根据需要调整盒子的样式和循环次数。在 Vue.js 中，我们使用 `v-for` 指令来指定循环的范围，并使用 `:key` 绑定每个循环项的唯一标识符。这是为了确保 Vue.js 可以正确地跟踪和更新循环项。

阅读全文