vue mock(模拟后台数据) +axios 简单实例(二)

需装上axios,build文件夹中webpack.dev.conf.js文件添加上vue mock配置的东东,  如,继(一)

//组件
<template> <div> <ul class="product"> <li v-for="(item, index) in goodsList"> <img v-bind:src="'/static/image/'+item.prodcutImg" > <h5>{{item.productName}}</h5> <p>{{item.prodcutPrice}}</p> </li> </ul> </div> </template>
<script>
import axios from 'axios'
export default {
  name: 'AppHome',
  data(){
    return{
      goodsList:[]
    }
  }
  ,mounted:function(){
    this.getGoodsList();
  },
  methods:{
    getGoodsList(){
      axios.get("/api/goodList").then((result)=>{
        var res = result.data;
        this.goodsList = res.result;
      })
     
    }
  }
}
</script>

OK,正常输出

猜你喜欢

转载自www.cnblogs.com/ghyes/p/9484695.html