鱼C论坛

 找回密码
 立即注册
查看: 1990|回复: 3

Vue-cli v-show失效的问题

[复制链接]
发表于 2020-5-12 20:04:07 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

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>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2020-5-12 20:05:11 | 显示全部楼层
跪求求大佬帮帮我吧~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-5-12 20:10:56 | 显示全部楼层
咳咳 ,该问题已解决
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 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);
                        
                  }
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-1-11 19:56

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表