vue循环生成div

遇到了一个需求，需要展示一年12个月的日历，然后一行为一个div，需要循环生成4个div，刚开始我查了一下，不知道怎么入手，然后问了我一个做前端的同学，一分钟就解决了。代码如下：<div v-for="item of 4" :key="item"><div style="float:left"><divstyle=" width: 500px; border: 1px

hsoluo

15700人浏览 · 2020-07-20 09:41:57

hsoluo · 2020-07-20 09:41:57 发布

在这里插入图片描述

遇到了一个需求，需要展示一年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！！！！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^