vue.js中 v-show在刷新页面时，会闪一下，如何解决？

最新推荐文章于 2022-07-07 08:48:39 发布

weixin_30902675

最新推荐文章于 2022-07-07 08:48:39 发布

阅读量1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gqx-html/p/7283841.html

版权

因为浏览器是html从上到下执行，先执行Dom元素，然后执行javaScript元素，v-show实在javaScript中控制,当走到javaScript时，Dom元素已经开始走动，所以如果网慢的话，会显示的特别明显，

如果想改变的话，那就直接用css控制显示与隐藏

转载于:https://www.cnblogs.com/gqx-html/p/7283841.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30902675

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

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

weixin_30765475的博客

03-05

1312

v-if和v-show可能是日常开发中最常用的两个指令，虽然看上去两者功能是类似的，但是两者还是存在很大区别的。 v-if与v-show区别：在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲...

【Vue】组件中v-show不渲染问题的解决

TalonZhang的博客

01-21

4287

问题：在使用 uni-app 开发的时候，写了一个类似于微博的关注组件，功能就是未关注的文章显示+关注按钮，关注后按钮消失。使用 v-show 来写，用一个变量isFollow来监听，isFollow来自于父组件通过 props传递。但是遇到一个问题就是：点击事件中修改isFollow的值之后，view 没有渲染，点击后关注按钮仍然存在，值确实已经发生改变，但 view 并没有重新渲染。 &...

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

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

Ddd_victory的博客

07-07

1328

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

基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

10-22

不想通过CSS自适应在PC端和移动端分别显示不同的样式，那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了，那么怎么跳转呢，网上也有很多文章说明，以下实现思路经过小编测试过，需要的朋友可以参考下

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

qq_43600406的博客

03-23

1674

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

css盒子闪现后被覆盖,vue v-if v-show页面闪烁div闪现 vue使用v-if v-show页面闪烁,div闪现的解决办法...

weixin_34900758的博客

08-03

253

在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。可以在根元素添加v-cloak来解决，并且设置它的样式即可。代码只是示例，还需要自己修改测试。Document /* 在引入的css文件中写入这个*/[v-cloak]{display: none;}contentnew Vue({el: '#app',data (){return {isShow: ...

元素的隐藏和显示（v-show指令)

最新发布

10-26

面试官：Vue中的v-show和v-if怎么理解？面试官：Vue实例挂载的过程中发生了什么? 面试官：说说你对Vue生命周期的理解? 面试官：为什么Vue中的v-if和v-for不建议一起用? 面试官：SPA（单页应用）首屏加载速度慢怎么...

vue-cli3.x以上版本中使用v-show or v-if无法做到实时更新

qq_37021104的博客

04-10

1610

当我有个element表格，想要做到点击编辑并保存时，我会想到这么做 <el-table :data="userInformation" :row-class-name="changeClassName"> <el-table-column min-width="50" label="用户名" prop="...

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

明月如霜丶

10-14

2718

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

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

骆小胖~

06-28

2359

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

使用v-show时，当isshow:false时，在页面刷新的过程中，短暂显示一下的问题

weixin_44673034的博客

11-14

1361

使用v-show时，当isshow:false时，在页面刷新的过程中，isshow依然会短暂显示一下解决方法：<div v-show="isshow" v-cloak></div> 设置css样式 [v-cloak] {display: none; } ...

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

weixin_39940788的博客

12-22

360

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

js 控制页面显示隐藏会闪一下解决方案

qq_35894025的博客

11-12

2578

问题描述：页面分为几个区域块，需要在点击某个按钮或者区域，来控制页面上的区域块显示隐藏。给元素上定义点击事件，根据自定义逻辑控制页面区域显示的时候，页面被隐藏的区域会出现一下，然后被隐藏，用户感觉闪一下。解决方案：我的问题是点击的元素上点击事件绑定了多个，将所有绑定的点击事件删除，重新绑定一个点击事件、或者只保留一个点击事件控制显示隐藏，问题完美解决。（问题项目是老项目，不是很规范，有事件是通...

js中点击链接又闪回去的解决办法

m0_51490605的博客

02-16

399

因为再点击链接之后会重新的刷新页面 所以会变为原来的样子解决办法： <a href="javascript"></a> 这样就可以啦！这个问题真的搞了我好久好气！

页面跳闪问题

woailuohui的专栏

06-18

430

浏览器解析html页面首先是下载html，然后在内存中把html代码转化成Dom Tree,然后浏览器根据Dom Tree上的Node分析css和images，当文档下载遇到js时，js独立下载。 js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放...

Vue.js使用踩坑指南：路由刷新与异步问题解决方案

虽然`v-show`和`v-if`都能实现条件渲染，但`v-if`有更高的开销，因为它会在编译时决定是否生成DOM。如果元素需要频繁切换，使用`v-show`更合适。 9. 了解并善用生命周期钩子 Vue的生命周期钩子如`beforeCreate`、`...