vue之axios请求

 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>