vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)

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

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

在加载的时候会看到

{{value.name}}

在页面出现,过了几秒之后才会渲染数据,在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文件里或者内联样式中

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的博客

zendframework中render,forward,redirect区别

1.render $this->render(‘my’);//注意没有.phtml 这样会在当前控制器下的my.phtml(也就是views/scripts...

3295
来自专栏编程

【C语言编程锦囊·连载49】如何进行字符串的比较?

问题阐述 字符串的比较,就是看两个字符串哪个大,哪个小。比较的原则是对两个字符串进行逐个字符的比较。直到有不相等的字符为止。例: “abcd” “abxa” 这...

1706
来自专栏破晓之歌

博客实现代码高亮 原

介绍:  –支持 71 种编程语言的语法解析  –拥有 44 种样式  –自动检测编程语言  –同时为多种编程语言代码高亮  –可以在 node.js...

715
来自专栏Python、Flask、Django

python中用requests获取API参数

1166
来自专栏C/C++基础

Linux命令(4)——declare/typeset命令(builtin)

declare命令(别名typeset)属shell内建命令,用于申明shell变量并设置变量属性,或查看已定义的shell变量和函数。若不加上任何参数,则会显...

442
来自专栏数值分析与有限元编程

Fortran知识|代码错误(input conversion error)

如图所示,提示:input conversion error ? 此时遇到了异常的转换错误。可能是输入数据类型与程序所声明变量类型不一致(比如输入2.5,对应变...

3446
来自专栏Python、Flask、Django

TP前台调用后台验证方法(跨模块继承控制器)

1033
来自专栏xcywt

makefile中伪目标的理解

1. 我们知道Makefile中的语法是这样: target ... : prerequisites ... command ...

2078
来自专栏Porschev[钟慰]的专栏

Nodejs学习笔记(三)--- 模块

简介及资料 通过Node.js的官方API可以看到Node.js本身提供了很多核心模块 http://nodejs.org/api/ ,这些核心模块被编译成二进...

1868
来自专栏开源项目

Git 项目推荐 | javascript ajax 代理调用工具

javascript ajax 代理调用工具 。 AjaxProxy url: /template/default/script/AjaxProxy.js; 接...

2839

扫描关注云+社区