vue数据渲染页面数据展示出现闪烁问题

在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如

<div class="#app"><p>{{value.name}}</p>
</div>

在加载的时候会看到

{{value.name}}

原因：由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，

所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7，8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。（别处借来的）

解决办法：

在页面出现，过了几秒之后才会渲染数据，在vue中有个指令可以解决这个问题，v-cloak

v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过我的试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，

<div class="#app" v-cloak><p>{{value.name}}</p>
</div>

而且，在css里面要添加

[v-cloak] {display: none;
}

这样就可以防止页面闪烁了。

备注：

但是有的时候会不起作用，可能的原因有二：

1、v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级

[v-cloak] {display: none !important;
}

2、样式放在了@import引入的css文件中

v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

vue数据渲染页面数据展示出现闪烁问题相关推荐

微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
Vue——路由变化页面数据不刷新问题
在项目中出现的情况是路由变化后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面. 情况一: 在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过route ...
vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
一.使用情景在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业 ...
怎么用vue自动更新页面数据
<body><div id="app"><div>欢迎:{{name}}</div><!-- {{}}就是插值语法相当于模板字 ...
jQuery的ajax获取数据渲染页面
一.ajax的请求方式 post $.ajax({//请求方式type:'POST',//发送请求的地址url:'xxxxxx',//服务器返回的数据类型dataType:'json',//发送到服务 ...
微信小程序数据渲染和数据请求
微信开放文档数据渲染概念:微信小程序和Vue实现理念是一致的,是基于数据驱动完成页面数据的自动化渲染.微信小程序中数据和Vue一样是响应式,即数据的更改会驱动页面进行数据的刷新. 具体操作首先找 ...
获取不到html页面上的元素,Vue v-for渲染页面，获取不到DOM元素解析
v-for 渲染循环渲染页面的出现让我们告别了繁琐的JS拼接,在开发上面节省了很多时间. 近期在开发中发现了在某些特定情况下,出现了获取不到渲染出来的DOM元素的情况,原因身为小白的我暂时还没搞清楚( ...
Vue定时刷新页面数据
我现在只知道两种最常见的定时刷新方案,一种是利用Vue的内置函数setTimeout.setInterval定时执行,另一种是websocket消息推送.我的需求是,当数据库中的数据发生更新时,前端就 ...
layui table数据渲染页面+筛选医生+在筛选日期一条龙2
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name=&q ...

vue数据渲染页面数据展示出现闪烁问题

vue数据渲染页面数据展示出现闪烁问题相关推荐

最新文章

热门文章