vue之axios请求

<script>
import axios from 'axios';
export default {
  name: 'CartItem',
  data () {
    return {
     lists:[

     ]
    }
  },
  methods:{
      getdata:function(){
          axios.get('http://123.207.32.32:8000/home/multidata').then(res=>{
              if(res.status=='200'){
                  this.lists=res.data.data.banner.list;
              }
          },
          (error)=>{
              console.log(error)
          })
      }
  },
  mounted:function(){
      this.getdata();  -----生命周期挂载axios请求
  }
}
</script>

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

<template>
  <div class="cartitem">
      <h2>购物车详情</h2>
      <div>
          <ul v-for="(list,index) in lists" :key="index">
              <li>{{list.title}}</li>
          </ul>
          <router-link to="/layout/home">
            <el-button type="primary">返回</el-button>
          </router-link>
      </div>  
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'CartItem',
  data () {
    return {
     lists:[

     ]
    }
  },
  methods:{
      getdata:function(){
          axios.get('http://123.207.32.32:8000/home/multidata').then(res=>{
              if(res.status=='200'){
                  this.lists=res.data.data.banner.list;
              }
          },
          (error)=>{
              console.log(error)
          })
      }
  },
  mounted:function(){
      this.getdata();
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>