Vue-cli v-show失效的问题

Akuma-hub

App.vue文件如下：
问题描述：点击按钮显示<div id="loader"></div> ,调用setTimeout() 3s后修改v-show的值，但是<div id="loader"></div>并没有隐藏

1. <template>
   
2.   <div id="app">
   
3.           <div v-show="isLoading" id="loader">
   
4.                   <span style="--i:1;"></span>
   
5.                   <span style="--i:2;"></span>
   
6.                   <span style="--i:3;"></span>
   
7.                   <span style="--i:4;"></span>
   
8.                   <span style="--i:5;"></span>
   
9.                   <span style="--i:6;"></span>
   
10.                   <span style="--i:7;"></span>
    
11.           </div>
    
12.           <button @click="updata">加载数据吧</button>
    
13.   </div>
    
14. </template>
    
15. 
    
16. <script>
    
17.         export default {
    
18.           name:'app',
    
19.           data(){
    
20.                 return {
    
21.                         isLoading:  false,
    
22.                         message: ""
    
23.                 }
    
24.           },
    
25.           components: {
    
26.                
    
27.           },
    
28.           methods: {
    
29.                   updata() {
    
30.                         this.isLoading = true
    
31.                         // console.log(this.isLoading)
    
32.                         setTimeout(function() {
    
33.                                 this.message = "用户数据加载成功！";
    
34.                                 this.isLoading = false;
    
35.                                 console.log(this.isLoading)
    
36.                         }, 3000);
    
37.                        
    
38.                   }
    
39.           },
    
40.         }
    
41. </script>
    
42. 
    
43. <style>
    
44.         *{
    
45.                 margin: 0;
    
46.                 padding: 0;
    
47.         }
    
48.        
    
49.         #app {
    
50.                 width: 800px;
    
51.                 min-height: 100vh;
    
52.                 background: black;
    
53.                 display: flex;
    
54.                 align-items: center;
    
55.         }
    
56.         button {
    
57.                
    
58.         }
    
59.         #loader {
    
60.                 margin: auto;
    
61.                 position: relative;
    
62.                 width: 200px;
    
63.                 height: 200px;
    
64.         }
    
65.        
    
66.         #loader span {
    
67.                 position: absolute;
    
68.                 top: 0;
    
69.                 left: 0;
    
70.                 width: 100%;
    
71.                 height: 100%;
    
72.                 display: block;
    
73.         }
    
74.         #loader span:before{
    
75.                 content: '';
    
76.                 position: absolute;
    
77.                 top: 0;
    
78.                 left: 0;
    
79.                 width: 40px;
    
80.                 height: 40px;
    
81.                 background: linear-gradient(#fce4ec, #03a9f4);
    
82.         }
    
83. </style>
    

复制代码

Akuma-hub

跪求求大佬帮帮我吧~

Akuma-hub

咳咳 ，该问题已解决

Akuma-hub

直接上源代码：

1. methods: {
   
2.                   updata() {
   
3.                         let _this = this;
   
4.                         this.isLoading = true
   
5.                         // console.log(this.isLoading)
   
6.                         setTimeout(function() {
   
7.                                 this.message = "用户数据加载成功！";
   
8.                                 _this.isLoading = false;
   
9.                                 console.log(_this.isLoading)
   
10.                         }, 3000);
    
11.                        
    
12.                   }

复制代码