Vue中Axios从远程/后台读取数据

created(){
   axios.get('http://jspang.com/DemoApi/oftenGoods.php')
       //then获取成功；response成功后的返回值（对象）
   .then(response=>{
     console.log(response);
     this.oftenGoods=response.data;
   })
       //获取失败
   .catch(error=>{
     console.log(error);
     alert('网络错误，不能访问');
   })
 },

 //读取分类商品列表
   axios.get('http://jspang.com/DemoApi/typeGoods.php')
   .then(response=>{
     console.log(response);
     //this.oftenGoods=response.data;
     this.type0Goods=response.data[0];
     this.type1Goods=response.data[1];
     this.type2Goods=response.data[2];
     this.type3Goods=response.data[3];
   })
   .catch(error=>{
     console.log(error);
     alert('网络错误，不能访问');
   })

<ul class='cookList'>
   <li v-for="goods in type3Goods">
     <span class="foodImg"><img :src="/UploadFiles/2021-04-02/goods.goodsImg">

若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接