vue里面使用setTimeout（延时器）代码演示加效果

最新推荐文章于 2025-05-19 15:36:44 发布

y叽里咕噜

最新推荐文章于 2025-05-19 15:36:44 发布

阅读量6.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_54030660/article/details/127860264

这篇博客介绍了如何在Vue中通过点击按钮控制一个模块先出现再延迟消失。代码示例展示了如何使用`$refs`获取元素，并结合`setTimeout`函数实现延迟隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

比如这个在vue里面实现一个点击按钮让模块先出现再俩秒之后消失

<div class="big">
<button @click="myfun">hucheu</buttton>
<div class="box" ref="box_ref">ghjklghjgh </div>
</div>

<script>
export default {
  data() {
    return {
      a: document.getElementsByClassName("box"),
    };
  },
  methods: {
    myfun() {
        // 点击之后让模块显示
      this.$refs.boxs.style.cssText = "display: block;";
      setTimeout(() => {
        // 俩秒之后让模块消失
          this.$refs.boxs.style.cssText = "display: none;";
        }, 2000);
    }
  },
#这个是不用写的，就是表示一下，setTimeout可以自动执行一个函数
  mounted(){
    setTimeout( 
        // 俩秒之后执行这个函数里面的内容
          this.myfun
        , 2000);
    }
  }
</script>