vue通过v-if隐藏的元素在网页加载时闪现

最新推荐文章于 2024-07-10 01:02:04 发布

秃头蚂蚁

最新推荐文章于 2024-07-10 01:02:04 发布

阅读量1.4k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45273478/article/details/124457198

版权

前言

今天用vue做一个h5页面的时候，发现加载页面的时候隐藏的元素闪烁一下消失了，很影响体验。简单分析了一下原因：

原因应该是请求的速度没有网页加载速度快，因为我是使用接口请求的数据判断隐藏与否的，所以就出现了这样的问题。通过上网查资料才解决了这个问题

解决方法

通过vue里面的指令v-cloak就能解决这个问题啦，这个指令的作用就是让js文件加载完成时让你的元素有一个预样式，加载完成再替换掉它

在<head>里面添加预样式：

<style> [v-cloak] {
    display: none;
  }

在需要添加预样式的元素绑定v-cloak指令：

 <div id="app" v-cloak>


 </div>

总结

这个平时不起眼的指令居然有这么大的作用，我也是今天遇到问题才第一次了解到它，记录一下，也希望帮助到大家

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

秃头蚂蚁

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue项目页面一闪一闪的问题解决办法（v-if闪屏、花括号闪屏）

qq_37635012的博客

01-16

1110

今天遇到一个vue项目的问题，就是在一个弹窗里如果用了v-if与v-else造成页面一闪一闪的，如下视频所示：vue项目页面用了v-if与v-else后一闪一闪的代码如下所示：当弹窗显示时，前台调后端接口后根据后端返回值来确定isShowPreviewForm变量的值，最开始我是用的v-if与v-else就会导致页面一闪一闪的，这是因为销毁dom元素后导致的闪屏，于是换成v-show来解决了这个闪屏问题。

Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

10-17

我们可以在CSS中设置`[v-cloak]`选择器，让它对应的元素在编译期间保持隐藏。例如： ```css [v-cloak] { display: none; } ``` 这样，只要元素还带有`v-cloak`指令，就会保持隐藏，直到Vue完成编译，移除该...

参与评论您还未登录，请先登录后发表或查看评论

vue中使用v-if隐藏元素时会出现闪烁问题

不靠谱的作曲家

08-27

4711

解决办法在div中加入v-cloak <div class="mask" v-if="modelShow" v-cloak></div> 然后在css中 [v-cloak] { display: none; } 就OK啦

vue3 关于解决路由元信息和v-if刷新页面组件闪烁问题

最新发布

qq_47470200的博客

07-10

543

添加meta字段利用v-if=”!$route.meta.showNav“指令时造成闪烁问题

【Vue】通守v-if加载div时，总是闪一下的解决方法（已解决，代码示例）

【敦厚的曹操】的专栏

10-27

1608

【Vue】通守v-if加载div时，总是闪一下的解决方法（已解决，代码示例）

【v-cloak】HTML中使用v-show和v-if时，页面加载时v-show和v-if控制的元素会闪现一下，如何解决？

Ddd_victory的博客

07-07

1306

HTML中使用v-show和v-if时，初始化页面时会出现v-show和v-if控制的模块会闪现一下，严重影响用户使用感知，那么如何解决该问题？

vue使用v-if v-show页面闪烁，div闪现的解决方法

wangchaoqi1985的博客

02-12

858

vue使用v-if v-show页面闪烁，div闪现的解决方法

Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

10-17

这个问题主要是由于Vue在初次渲染时，还未解析到JavaScript部分，所以无法应用v-if和v-else-if的逻辑，导致所有元素都先显示，然后再根据条件判断隐藏，从而产生闪现效果。为了解决这个问题，可以使用v-cloak指令...

vue使用v-if v-show页面闪烁,div闪现的解决方法

12-12

在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。可以在根元素添加v-cloak来解决，并且设置它的样式即可。代码只是示例，还需要自己修改测试。 <!DOCTYPE html> <...

vue中使用v-if出现闪现然后消失

weixin_小白鼠的博客

07-12

1912

目标效果：当访问的路径是need时就隐藏顶部的common组件具体问题：访问 http://localhost:8080/#/need，每次刷新页面顶部都会闪现一下蓝色的盒子（common.vue）相关路由：根组件App.vue common.vue是一个蓝色的盒子 need.vue组件解决思路访问这个路由的时候,当前路由 route.name===‘name’，所以v-if=“false”;应当不会闪现；组件应该都不会被创建实际上每次初始化的时候，common组件都会渲染一次；方案1: 我想先将组件

echarts通过v-if切换隐藏后还是会显示在页面上

克己

07-14

1165

echarts通过v-if切换隐藏后还是会显示在页面上

vue使用v-if v-show页面闪烁,div闪现的解决

骆小胖~

06-28

2308

在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。可以在根元素添加v-cloak来解决，并且设置它的样式即可。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 在引入的css文件中写入这个*/ ...

vue 使用v-show时出现闪一下消失的情况

qq_43600406的博客

03-23

1633

在项目当中使用v-show来控制按钮的显示和隐藏，但是页面加载时按钮会显现一下，然后消失。可以在css文件里面加上，可以解决。 [v-show] { display: none; }

关于使用vue的v-if时出现闪烁的情况

qq_41083105的博客

07-17

6348

问题描述：使用v-if的时候，当在切换两个使用了v-if的元素的时候，很有可能会出现切换时闪烁的问题，我的理解是，每次使用v-if，都是将对应的dom元素从dom树中删除又重建，这就有一个延迟的事件，也许很短，但是体现在屏幕上就是所谓的闪烁的情况。解决办法：换而使用v-show就可以解决闪烁的问题，因为v-show就只是隐藏而已，只是将样式给隐藏，实际上它还在原来的位置，只不过是看不见了，这样两个元素在切换的时候就没有延迟，不出现闪烁的情况。 ...

Vue v-if/v-show/插值表达式导致闪现的原因及解决办法

明月如霜丶

10-14

2666

在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失，最近研究了一下这个问题的原因和解决办法，这里和大家分享一下。 1.闪现的原因这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译，所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前，DOM已经渲染出来了，之后Vue才会执行...

解决jQuery打开或跳转页面隐藏元素闪动问题

qq_44782585的博客

01-26

1358

有时候一个问题限制了你，往往可以换一种思路问题如题意，我的大致开发需求是：我有一个写好的页面，在另一个页面用弹窗的方式打开，打开的时候隐藏掉头部和侧边菜单栏原始做法有bug：在打开时，传值判断是页面来的，还是弹窗来的，如果是弹窗，就给头部和侧边加 .hide() 的方法，问题解决，但是在弹窗加载时，被隐藏的元素会先加载一遍，再隐藏掉。有个闪动的效果，体验感不好。原因（个人理解）：页面进来，首先加载DOM元素，再去调用的的 hide 方法，因此出现先显示，后隐藏的闪动效果解决办法: 在原始页面上，给之

if vue 跳出_vue使用v-if v-show 页面闪烁

weixin_39940788的博客

12-22

351

最近在写组件时遇到一个问题，视图需要根据接口返回的数据频繁的切换状态又使用v-if时候加载出来的试图时闪烁我们来看一下 v-if 和 v-show 的区别和优先级v-if 和 v-show 的区别在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件...

vue项目中使用v-if控制盒子显示隐藏后快速简易的增加动画效果

m0_61691058的博客

12-16

4938

首先将我们已经用v-if控制显示与隐藏的盒子用 <transition-group name="lyric"></transition-group>标签包起来 name属性即为下面写样式的类名 <template> <div> <transition-group name="lyric"> //注意需要加入KEY值否则报错 <div v-if="showDefaultAttr" :key="1"> </div&...

vue路由跳转的时候隐藏或去掉导航栏或者菜单栏

qzh88888888的博客

10-12

622

vue路由跳转的时候隐藏或去掉导航栏或者菜单栏-CSDN博客

vue使用v-if做显示隐藏

05-12

在Vue中，可以使用v-if指令来控制元素的显示和隐藏。v-if的用法如下： ``` <template> <div> <button @click="toggle">Toggle</button> <div v-if="show">Hello World!</div> </div> </template> <script> export default { data() { return { show: true }; }, methods: { toggle() { this.show = !this.show; } } }; </script> ``` 在上面的代码中，我们定义了一个show变量来控制元素的显示和隐藏。当show为true时，div元素会显示出来；当show为false时，div元素会隐藏。我们在按钮的点击事件中切换show变量的值，从而实现元素的显示和隐藏。