根据数字4 循环4个div elementUI或vue实现
时间: 2024-02-03 19:14:53 浏览: 115
基于vue开发的数字滚动组件
以下是使用Vue.js实现的示例,可以循环4个div元素:
```html
<template>
<div>
<div v-for="n in 4" :key="n" class="box">{{ n }}</div>
</div>
</template>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: #ccc;
display: inline-block;
text-align: center;
line-height: 100px;
font-size: 36px;
}
</style>
```
在上面的示例中,使用了Vue.js的`v-for`指令来循环4次,并绑定了一个key属性。然后在每次循环中创建一个div元素,其中包含一个数字(从1到4),并添加了一个类名为"box"的CSS样式。最终的效果是在页面上显示4个相同大小的方框,每个方框中都有一个数字。
阅读全文