论坛 › 新手乐园 › Vue-cli v-show失效的问题

Akuma-hub 发表于 2020-5-12 20:04:07

Vue-cli v-show失效的问题

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>

Akuma-hub 发表于 2020-5-12 20:05:11

跪求求大佬帮帮我吧~{:5_107:}

Akuma-hub 发表于 2020-5-12 20:10:56

咳咳 ，该问题已解决

Akuma-hub 发表于 2020-5-12 20:11:32

直接上源代码：
methods: {
                  updata() {
                        let _this = this;
                        this.isLoading = true
                        // console.log(this.isLoading)
                        setTimeout(function() {
                                this.message = "用户数据加载成功！";
                                _this.isLoading = false;
                                console.log(_this.isLoading)
                        }, 3000);
                       
                  }

查看完整版本: Vue-cli v-show失效的问题