<template>
<div>
<!-- 第一步 -->
<button @click="getData">大力出奇迹</button>
<!-- 第六步 做判断-->
<div v-if="data">
<!-- 遍历 图片-->
<div v-for="x in data.data.list" :key="x.rid">
<img :src="x.roomSrc" alt="">
</div>
</div>
</div>
</template>
<script>
// 第二步
import axios from 'axios'
export default {
// 第五步
data(){
return{
// 开始显示数据为空,目的是让点击按钮显示图片
data:null
}
},
// 第三步
methods:{
getData(){
var url=`http://douyu.xin88.top/api/room/list`
axios.get(url).then(res=>{
// F12显示打印的数据
console.log(res);
// 第四步
// 请求道的数据 存储到本地变量中
this.data =res.data
})
},
}
}
</script>
<style lang="scss" scoped>
</style>
Vue代码如下:
效果图如下:
关键:
<!-- 第六步 做判断-->
<div v-if="data">
<div v-for="x in data.data.list" :key="x.rid">
<img :src="x.roomSrc" alt="">
</div>
</div>