Vue mock模擬獲取資料 迴圈遍歷檢視

最終樣式：

結構：

準備：

安裝mock.js

npm install mockjs

安裝axios

npm install axios

main.js中引入

import axios from 'axios'複製程式碼

Vue.prototype.$http=axios複製程式碼

將axios掛載到Vue全域性，元件使用時無需引入，可以直接使用$http代替axios即可

在src下建api資料夾，資料夾中建立mock.js檔案

mock.js中全部內容：

Mock.mock() 第一個引數是path路徑 第二個引數是內容

import Mock from 'mockjs'

Mock.mock('/productlist',{
    'listinfo':[
      {
        img:require("../assets/img/list-eat3.jpg"),
        title:'雞爪 零食 精品零食 特價',
        sale:"包郵|第二件9.9"
      },
      {
        img:require("../assets/img/list-eat4.jpg"),
        title:'蝦條 韓國',
        sale:"包郵|第二件9.9"
      },
      {
        img:require("../assets/img/list-eat5.jpg"),
        title:'山藥薄片 零食',
        sale:"包郵|第二件9.9"
      },
      {
        img:require("../assets/img/list-eat6.jpg"),
        title:'香濃糕點 奶香 烘焙',
        sale:"包郵|第二件9.9"
      },
      {
        img:require("../assets/img/list-eat7.jpg"),
        title:'零食大禮包',
        sale:"包郵|第二件9.9"
      },
      {
        img:require("../assets/img/list-eat8.jpg"),
        title:'沙琪瑪',
        sale:"包郵|第二件9.9"
      },
    ],
  }
)複製程式碼

在main.js中引入mock.js

import './api/mock.js'複製程式碼

建立Rushbuy.vue元件

Rushbuy.vue中所有內容

<template>
    <div>
      <div class="Rush-buy" v-for="(items,index) in arr" :key="index">
      <a href="#" class="Rush-buy-img">
        <img :src="items.img" alt="">
      </a>
      <div class="list-info">
          <p>{{items.title}}</p>
          <p class="sale">{{items.sale}}</p>
        <div class="list-info-price">
          <div class="price">
            <p>￥10</p>
            <p>￥7.7</p>
          </div>
          <i class="iconfont icon-goumaiyemiande-xiaogouwuche"></i>
        </div>
      </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Rushbuy",
      data(){
        return {
          arr:[]
        }
      },
      mounted(){
        this.$http({
          method:"get",
          url:'/productlist',
        }).then(res=>{
          this.arr = res.data.listinfo;
        })
      }
    }
</script>

<style scoped>
.Rush-buy{
  width: 100%;
  height:2.11rem;
  background: white;
  display: flex;
  margin-bottom: .7rem;
}
.Rush-buy-img{
  width:2rem;
  height: 2rem;
  background: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: .1rem;
  border-radius: 5px;
}
.Rush-buy-img img{
    width:1.8rem;
    height: 1.8rem;
}
.list-info{
  margin-top: .1rem;
  margin-left: .14rem;
}
.list-info p:first-child{
  font-size: .16rem;
}
.list-info .sale{
  font-size: .12rem;
  margin-top: .15rem;
  color: #9a9a9a;
}
  .list-info-price{
    width: 4.2rem;
    display: flex;
    justify-content: space-between;
    margin-top: .15rem;
  }
.list-info-price .price{
  display: flex;
}
.list-info-price .price p:first-child{
  font-size: .12rem;
  color: #ff5d02;
}
.list-info-price .price p:last-child{
  font-size: .09rem;
  text-decoration: line-through;
  margin-left: .09rem;
}
.list-info-price i{
  color: #ff5d02;
  font-weight: bold;
}
</style>
複製程式碼