安裝mock.jsvue
npm install mockjsios
安裝axiosnpm
npm install axiosaxios
main.js中引入api
import axios from 'axios'複製代碼
Vue.prototype.$http=axios複製代碼
將axios掛載到Vue全局,組件使用時無需引入,能夠直接使用$http代替axios便可bash
在src下建api文件夾,文件夾中建立mock.js文件flex
Mock.mock() 第一個參數是path路徑 第二個參數是內容ui
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.jsthis
import './api/mock.js'複製代碼
建立Rushbuy.vue組件url
<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>
複製代碼