案例:新闻列表页面加载,调用接口为黑马:http://hmajax.itheima.net/api/news
代码放在App.vue中
<template>
<div class="main">
<div class="box" v-loading="isLoading">
<ul>
<li v-for="item in list" :key="item.id" class="news">
<div class="left">
<div class="title">{{ item.title }}</div>
<div class="info">
<span>{{ item.source }}</span>
<span>{{ item.time }}</span>
</div>
</div>
<div class="right">
<img :src="item.img" alt="">
</div>
</li>
</ul>
</div>
<div class="box2" v-loading="isLoading2"></div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
list:[],
isLoading:true,
isLoading2:true
}
},
created(){
axios.get('http://hmajax.itheima.net/api/news')
.then(response => {
// 处理响应数据
// console.log(response);
setTimeout(()=>{
this.list = response.data.data
this.isLoading = false
},2000)
})
.catch(error => {
// 处理错误情况
console.log(error);
});
},
directives:{
loading:{
// inserted钩子中,判断指令的值,设置默认状态
inserted(el,binding){
binding.value ? el.classList.add('loading') : el.classList.remove('loading')
},
// update钩子中,判断指令的值,更新类名状态
update(el,binding){
binding.value ? el.classList.add('loading') : el.classList.remove('loading')
}
}
}
}
</script>
<style>
.loading:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff url('./assets/loading.gif') no-repeat center;
}
.box2 {
width: 400px;
height: 400px;
border: 2px solid #000;
position: relative;
}
.box {
width: 800px;
min-height: 500px;
border: 3px solid orange;
border-radius: 5px;
position: relative;
}
.news {
display: flex;
height: 120px;
width: 600px;
margin: 0 auto;
padding: 20px 0;
cursor: pointer;
}
.news .left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 10px;
}
.news .left .title {
font-size: 20px;
}
.news .left .info {
color: #999999;
}
.news .left .info span {
margin-right: 20px;
}
.news .right {
width: 160px;
height: 120px;
}
.news .right img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>