vue.js页面刷新出现闪烁问题的解决

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

以上两个问题都可以使用以下的方案来解决。

在css中定义

[v-cloak] {
   display:none;

}

在v-if中加上v-cloak即可解决.

示例:

[v-cloak] {

display: none; 

<div v-cloak>

{{ message }}

</div>

原理:

带有v-clock的的元素设置为display:none,隐藏掉,在等到vue解析到带有v-clock的节点时候,会把attribute和class同时remove掉,这样就可以实现防止节点的闪烁。

原文地址:https://www.cnblogs.com/wnsry/p/9132398.html

时间: 2024-08-09 19:51:48

vue.js页面刷新出现闪烁问题的解决的相关文章

vuex页面刷新数据不保留,解决方法(转)

今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app.vue里通过接口获取然后存储在vueX里的,在路由activity.vue中,我们需要用到这个变量,并且通过这个变量的值来控制路由页面里某一段dom元素的显示与否. 这个需求这样描述起来,是很好实现的.于是我就简单写了几段代码,很简单轻松的实现了这个需求: //acitity.vue Dom结构

【laravel5.4+vue.js】laravel 循环三维数组,解决:htmlentities() expects parameter 1 to be string, array given

laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop="interest"> @foreach($permission3level as $k => $v) @foreach($v as $k2 => $v2) {{$v2['name']}}+++{{$v2['cate_id']}} @endforeach @endforeach &

nignx部署Vue单页面刷新路由404问题解决

在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题 说明: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({

js 页面刷新location.reload和location.replace的区别小结(转)

首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面. 语法: location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL.

js页面刷新的方法location.reload()

reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 96 @switch_state = (entity_class, entity_id, state_attribute_name) -> 97 $.ajax({ 98 url: '<%=

【js 方法】js 页面刷新location.reload和location.replace的区别 【转】

[转]:http://zccst.iteye.com/blog/2162658 reload 方法,该方法强迫浏览器刷新当前页面. 语法: location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,

js 页面刷新方法

1.reload方法,该方法强迫浏览器刷新当前页面语法:location.reload([bForceGet])参数:bForceGet,可选参数,默认为false从客户端缓存里取当前页.true,则以GET方式,从服务端获取最新的页面,相当于客户端点击F5("刷新")例子:window.location.reload(); 2.replace方法,该方法通过制定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进"和&qu

js 页面刷新location.reload和location.replace的区别小结

在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做.下面有一些相关的内容,大家看完了就会有更多的收获. 首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面. 语法: location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新

解决vue单页面刷新后vuex中数据恢复初始值的问题

思路是页面关闭前将state的数据存储到浏览器缓存里,页面加载时再取出来存到state中 //App.vue created () { if (this.$getLocal("store")) { this.$store.replaceState( Object.assign({}, this.$store.state, this.$getLocal("store", "parse")) ); } window.addEventListener(