m0_67982952 2022-04-07 15:49 采纳率: 46.7%
浏览 160
已结题

请问基于vue如何实现随机配多张图?

img


如图一个页面上有多个产品,这有五张图片,

img

有没有可能实现每个产品的配图是随机的,新增产品后随机给她配一个封面图,每个产品的图还不一样,请问能否纯前端实现这个功能呢?请赐教,不胜感激。
下为完整的html代码:

   <template>
            <a-card style="width: 100%;height: 100%">
              <div class="card_top" style="display: flex;height:70%">
                <div>
                  <img src="../../assets/3.png" style="width:140px;height:140px;margin-right: 10px">
                </div>

                <div class="textBlock" style="text-align: center">
                  <div class="depositName" style="text-align:center;margin-bottom:10px;font-weight: bold;line-height: 1.25rem;font-size: 1.25rem">{{item.name}}</div>

<!--                  <div class="depositIntroduction" style="margin-bottom: 10px">-->
<!--                    <span style="margin-right: 5px;font-weight: 550">年利率:</span>-->
<!--                    <span style="color:rgb(215,0,15);">{{ item.annualRate }}%</span>-->
<!--                  </div>-->
                  <div class="depositIntroduction" style="margin-bottom: 5px;text-align: center">
                    <div style="color:rgb(215,0,15);font-size: 24px;font-weight: bold;">{{ item.annualRate }}%</div>
                    <div style="margin-right: 5px;font-size: 14px;color:#999999">年利率</div>

                  </div>
                  <div class="depositIntroduction" style="margin-bottom:3px">
                    <span style="font-size: 14px;color:#999999;margin-right: 5px;">产品期限: </span>
                    <span  v-if="item.term>365&&item.term%365===0">
                      <span style="font-size: 16px;font-weight: 580;">{{ item.term/365}}</span><span></span>
                    </span>
                    <span v-else-if="item.term<365&&item.term%30===0">
                       <span style="font-size: 16px;font-weight: 580;">{{ item.term/30}}</span><span>个月</span>
                    </span>
                   <span v-else>
                     <span style="font-size: 16px;font-weight: 580;">{{ item.term}}</span><span></span>
                   </span>

                  </div>
                  <div class="depositIntroduction">
                    <span style="font-size: 14px;color:#999999;margin-right: 5px;">起存金额: </span>
                    <span style="font-size: 16px;font-weight: 580;">{{ item.initialMoney }}</span>
                    <span></span>
                  </div>
                </div>
              </div>
              <a-divider dashed :style="{marginTop: '15px',marginBottom: '15px'}"/>
              <div class="card_bottom" style="height: 30%;display: flex;margin-bottom: 10px;position: relative">

                <div class="stateTag">
                    <a-tag color="green" :style="{width:'70px',height:'30px',textAlign:'center',paddingTop:'3px',fontSize:'15px'}" v-if="item.status === 2">
<!--                      <template #icon>-->
<!--                        <check-circle-outlined />-->
<!--                      </template>-->
                      已上线
                    </a-tag>
                    <a-tag color="blue"  :style="{width:'70px',height:'30px',textAlign:'center',paddingTop:'3px',fontSize:'15px'}" v-else-if="item.status === 0">
<!--                      <template #icon>-->
<!--                        <sync-outlined :spin="true" />-->
<!--                      </template>-->
                      开发中
                    </a-tag>

                    <a-tag color="orange"  :style="{width:'70px',height:'30px',textAlign:'center',paddingTop:'3px',fontSize:'15px'}" v-else>
<!--                      <template #icon>-->
<!--                        <exclamation-circle-outlined />-->
<!--                      </template>-->
                      审核中
                    </a-tag>
                  </div>

                <div class="operationBlock" style="position: absolute;right:10px">
                  <el-dropdown size="small">
                    <el-button type="danger" size="small">
                      操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" v-if="item.status">
                      <el-dropdown-item @click.native="goToSee(item.id, item.name)"><a-icon type="play-square" class="iconStyle" />查看</el-dropdown-item>
                      <el-dropdown-item @click.native="offlineProducts(item.id)"><a-icon type="disconnect" class="iconStyle" />下线产品</el-dropdown-item>

                    </el-dropdown-menu>
                    <el-dropdown-menu slot="dropdown" v-else>
                      <el-dropdown-item @click.native="goToFlowSheet(item.id, item.name)"><a-icon type="edit" class="iconStyle" />编辑</el-dropdown-item>
                      <el-dropdown-item @click.native="submitProduct(item.id)"><a-icon type="select" class="iconStyle" />提交审核</el-dropdown-item>
                      <el-dropdown-item @click.native="preview(item.id)"><a-icon type="eye" class="iconStyle"/>预览</el-dropdown-item>
                      <el-dropdown-item @click.native="editConfig(item)"><a-icon type="apartment" class="iconStyle" />更改配置</el-dropdown-item>
                      <el-dropdown-item @click.native="offlineProducts(item.id)">

                        <a-popconfirm
                            title="你确定要删除该产品吗"
                            ok-text="确定"
                            cancel-text="取消"
                            @confirm="deleteProduct(item.id)">

                          <a-icon type="delete" class="iconStyle" />删除
                        </a-popconfirm>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>


                </div>
              </div>
            </a-card>
          </template>




  • 写回答

4条回答 默认 最新

  • 雾里桃花 2022-04-07 17:25
    关注

    生命一个数组,数组里面存放图片的路径,添加的时候使用Math.random()随机一条路径就可以

    let arr = ['http://a.png', 'http://b.png', 'http://c.png', 'http://d.png', 'http://e.png' ];
    let index = parseInt(Math.random() * arr.length);
    let img = arr[index];
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 4月17日
  • 已采纳回答 4月9日
  • 修改了问题 4月7日
  • 创建了问题 4月7日

悬赏问题

  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因
  • ¥20 python作业求过程
  • ¥15 wincc已组态的变量过多
  • ¥60 如图:直线与椭圆X轴平行,求直线与椭圆任意一点的相切坐标计算公式
  • ¥50 如何用python使用opencv里的cv::cudacodec::VideoWriter函数对视频进行GPU硬编码
  • ¥100 c#solidworks 二次开发 工程图自动标边线法兰 等折弯尺寸怎么标
  • ¥15 halcon DrawRegion 提示错误
  • ¥15 FastAPI Uvicorn启动显示404
  • ¥15 centos7.9脚本,怎么排除特定的访问记录
  • ¥15 关于#Django#的问题:我的静态文件呢?