vue中的v-if指令造成的页面闪烁问题

半个开心果 2018-06-27 03:25:29

刚入门vue，遇到一个问题，vue中的v-if指令造成的页面闪烁问题，添加了v-clock也不管用，请大家指点一下如何解决

...全文

1877 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

半个开心果 2018-07-12

打赏
举报

回复

谢谢，又试了一下，对了

ambit_tsai-微信 2018-06-27

打赏
举报

回复

v-cloak没用错吧？用它，还要加一个css的



<div v-cloak>

  {{ message }}

</div>



[v-cloak] {

  display: none;

}

v-if和v-show可能是日常开发中最常用的两个指令，虽然看上去两者功能是类似的，但是两者还是存在很大区别的。 v-if与v-show区别：在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。简单来说二者最大的区

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

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

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

一: v-clock 使用v-if和v-show显示隐藏,频繁刷新页面，会出现元素闪烁问题使用，最外层div加v-clock body里面加 <div id="#app" v-cloak> <p>{{author}}</p> </div> style里面加 [v-cloak] { display: none; } 二: v-pre的理解 v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。.

10,606

社区成员

29,047

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章