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，正常输出

转载于:https://www.cnblogs.com/ghyes/p/9484695.html