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>