vue之axios请求

2020-12-02 18:02:18 阅读：148 来源： 互联网

标签：function axios 请求 res lists vue error data

 1 <script>
 2 import axios from 'axios';
 3 export default {
 4   name: 'CartItem',
 5   data () {
 6     return {
 7      lists:[
 8 
 9      ]
10     }
11   },
12   methods:{
13       getdata:function(){
14           axios.get('http://123.207.32.32:8000/home/multidata').then(res=>{
15               if(res.status=='200'){
16                   this.lists=res.data.data.banner.list;
17               }
18           },
19           (error)=>{
20               console.log(error)
21           })
22       }
23   },
24   mounted:function(){
25       this.getdata();  -----生命周期挂载axios请求
26   }
27 }
28 </script>

实现从接口获取数据并在页面遍历展示出来

 1 <template>
 2   <div class="cartitem">
 3       <h2>购物车详情</h2>
 4       <div>
 5           <ul v-for="(list,index) in lists" :key="index">
 6               <li>{{list.title}}</li>
 7           </ul>
 8           <router-link to="/layout/home">
 9             <el-button type="primary">返回</el-button>
10           </router-link>
11       </div>  
12   </div>
13 </template>
14 <script>
15 import axios from 'axios';
16 export default {
17   name: 'CartItem',
18   data () {
19     return {
20      lists:[
21 
22      ]
23     }
24   },
25   methods:{
26       getdata:function(){
27           axios.get('http://123.207.32.32:8000/home/multidata').then(res=>{
28               if(res.status=='200'){
29                   this.lists=res.data.data.banner.list;
30               }
31           },
32           (error)=>{
33               console.log(error)
34           })
35       }
36   },
37   mounted:function(){
38       this.getdata();
39   }
40 }
41 </script>
42 <!-- Add "scoped" attribute to limit CSS to this component only -->
43 <style scoped>
44 </style>

标签：function,axios,请求,res,lists,vue,error,data
来源： https://www.cnblogs.com/chenxueting/p/14075322.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue之axios请求