#vue# 【十一】使用v-for循环出多个内容

#前端001之网络请求

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

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

在这里插入图片描述

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

HTML：

css"> <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里面，设置数组为空

css">  data () {
        return {
            newList: [
            ],
        }
    },

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

css">
.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;
}