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>
复制代码