#vue# 【十一】使用v-for循环出多个内容_v-for里可以写多个循环条件吗-CSDN博客

本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/117248843

本文介绍了前端页面中如何通过网络请求获取数据并动态渲染卡片布局。使用v-for指令结合数组循环，从后台接口获取数据，实现多个卡片的展示。卡片内容包括图片和文字，样式通过CSS进行定义，确保布局一致。通过设置data中的数组为空，然后在网络请求完成后填充数据，实现了动态加载的效果。

摘要由CSDN通过智能技术生成

#前端001之网络请求

在前端的页面中，网络请求是一个非常重要的存在
可以让我们省去很多排版步骤
下面就详细讲一下网络请求的步骤

首先我们排版了一个页面
比如是一个有4个相同卡片板块的页面
里面包含图片以及文字
效果示例如下

在这里插入图片描述

那我们只需要排版时，只需要做第一个卡片，
再使用v-for, 循环数组，
后面通过网络请求就可以循环出其他几个卡片板块（数据内容）

HTML：

 <div class="big-box" v-for="item in newList"> // newList这个数组通过网络请求拿到全部的数据
        <div>//item 是这个数组里面的一条数据，里面包含各个我们想要的数据
        //item in newList 的意思是拿到第一条数据里面的全部数据
             <img :src="item.pic" alt="">
        //item.pic的意思是拿到该条数据里面的图片
        </div>
        <h4>{{item.url}}</h4>
       //item.url的意思拿到该条数据里面的地址 都是会在后端同事返回给我们的接口文档里面有的
 </div>

js:
然后在data里面，设置数组为空

  data () {
        return {
            newList: [
            ],
        }
    },

css：
写上卡片板块的样式，然后循环出同样的另外3个样式就可以了


.big-box {
    display: inline-block;
    width: 310px;
    height: 300px; //计算好每一个的宽度高度是多少
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(206, 206, 206, 0.5);
    border-radius: 5px;
    margin-right: 20px;
}
.big-box:last-child{  
 //这个是第4个卡片板块，为了不让它掉到下面区域，我们要单独设置它的右外边距为0
    margin-right: 0;
}

.big-box div {
    width: 311px;
    height: 175px;
    border-radius: 5px 5px 0 0;
    background-color: #333333;
    overflow: hidden;
}
.big-box div:hover {
    cursor:pointer;
}

.big-box img {
    width: 100%;
    height: 100%;
    background-color: #F9B008;
    transform: scale(1.1);
    transition: all 0.6s;
}

.big-box img:hover{
    transform: scale(1.5);
}

.big-box h4 {
    width: 275px;
    height: 52px;
    font-size: 18px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #333333;
    line-height: 26px;
    -webkit-line-clamp: 2;/** 显示的行数 **/
    overflow: hidden;
    margin: 18px 18px ;
}

.big-box h4:hover,.big-box p:hover {
    color: red;
    cursor:pointer;
}
.big-box p {
    width: 234px;
    height: 20px;
    font-size: 14px;
    font-family: SourceHanSansSC-Normal, SourceHanSansSC;
    font-weight: 400;
    color: #999999;
    margin-left: 14px;
}