vue循环生成div

在这里插入图片描述

遇到了一个需求,需要展示一年12个月的日历,然后一行为一个div,需要循环生成4个div,刚开始我查了一下,不知道怎么入手,然后问了我一个做前端的同学,一分钟就解决了。
代码如下:

 <div v-for="item of 4" :key="item">
      <div style="float:left">
        <div
          style=" width: 500px; border: 1px ;solid #d9d9d9; borderRadius: 4px;margin-top:20px;margin-left:70px"
        >
          <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
        </div>
      </div>
      <div style="float:left">
        <div
          style=" width: 500px; border: 1px ;solid #d9d9d9; borderRadius: 4px;margin-top:20px;margin-left:80px"
        >
          <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
        </div>
      </div>
      <div style="float:left">
        <div
          style=" width: 500px; border: 1px ;solid #d9d9d9; borderRadius: 4px;margin-top:20px;margin-left:80px"
        >
          <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
        </div>
      </div>
    </div>

在这里插入图片描述
重点是这个v-for!!!!

猜你喜欢

转载自blog.csdn.net/weixin_39040527/article/details/107456863