马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
App.vue文件如下:
问题描述:点击按钮显示<div id="loader"></div> ,调用setTimeout() 3s后修改v-show的值,但是<div id="loader"></div>并没有隐藏
<template>
<div id="app">
<div v-show="isLoading" id="loader">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
</div>
<button @click="updata">加载数据吧</button>
</div>
</template>
<script>
export default {
name:'app',
data(){
return {
isLoading: false,
message: ""
}
},
components: {
},
methods: {
updata() {
this.isLoading = true
// console.log(this.isLoading)
setTimeout(function() {
this.message = "用户数据加载成功!";
this.isLoading = false;
console.log(this.isLoading)
}, 3000);
}
},
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
#app {
width: 800px;
min-height: 100vh;
background: black;
display: flex;
align-items: center;
}
button {
}
#loader {
margin: auto;
position: relative;
width: 200px;
height: 200px;
}
#loader span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
#loader span:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
background: linear-gradient(#fce4ec, #03a9f4);
}
</style>
|