v-cloak使用
v-cloak
:保持和元素实例的关联,直到结束编译后自动消失。
v-cloak指令和CSS 规则一起用的时候,能够解决差值表达式闪烁的问题(即:可以隐藏未编译的标签直到实例准备完毕)。
就拿上一段代码来举例,比如说,{{name}}
这个内容,在网速很慢的情况下,一开始会直接显示{{name}}
这个内容,等网络加载完成了,才会显示smyhvae
。那这个闪烁的问题该怎么解决呢?
解决办法是:通过v-cloak
隐藏{{name}}
这个内容,当加载完毕后,再显示出来。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style> /*2、在样式表里设置:只要是有 v-cloak 属性的标签,我都让它隐藏。
直到 Vue实例化完毕以后,v-cloak 会自动消失,那么对应的css样式就会失去作用,最终将span中的内容呈现给用户 */
[v-cloak] {
display: none;
}
</style>
</head> <body>
<div id="app">
<!-- 1、给 span 标签添加 v-cloak 属性 -->
<span v-cloak>{{name}}</span> </div>
</body>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: 'sloanlv'
}
});
</script> </html>
v-cloak使用的更多相关文章
- vue 实例未加载完成显示 花括号解决方案
css [v - cloak] { display: none!important; } html < div id = "app" v-cloak >
- J a v a 的“多重继承”
接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...
- Exception in thread "main" java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V
在学习CGlib动态代理时,遇到如下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.objectwe ...
- [Erlang 0118] Erlang 杂记 V
我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下. 做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...
- v$session中server为none与shared值解析
查询V$SESSION,你会看到SERVER可能会有DEDICATED| SHARED| PSEUDO| NONE 四种值,如果SERVER字段的值除了DEDICATED,还有NONE,则说明当前实例 ...
- 引用js或css后加?v= 版本号的用法
<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...
- 操作系统中的P,V操作(转)
无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...
- 关于P,V操作理解的突破,关于并发设计与并行
今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...
- XV Open Cup named after E.V. Pankratiev. GP of Tatarstan
A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...
- XVII Open Cup named after E.V. Pankratiev. GP of SPb
A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...
随机推荐
- String类型不属于八种基本类型
String不属于8种基本数据类型,String是一个对象.因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. new String( ...
- Android进阶——多线程系列之Thread、Runnable、Callable、Future、FutureTask
多线程一直是初学者最抵触的东西,如果你想进阶的话,那必须闯过这道难关,特别是多线程中Thread.Runnable.Callable.Future.FutureTask这几个类往往是初学者容易搞混的. ...
- XML--XSL
参考 http://blog.51cto.com/cnn237111/1345998 https://www.w3.org/TR/2017/REC-xslt-30-20170608/ 声明 把文档声明 ...
- VEH&VCH
本文99.9%的代码及内容作者:mengwuji 来自:http://www.mengwuji.net/forum.php?mod=viewthread&tid=1371 VEH:向量化异常处 ...
- chown virtualbox
virtualbox安装 root@cbill-VirtualBox:/# chown --help用法:chown [选项]... [所有者][:[组]] 文件... 或:chown [选项]... ...
- js 循环与判断语句的几个练习
<script type="text/javascript"> /*1.X3 * 6528 = 3X * 8256 X为一个数字 填入一个数字 使等式成立*/ for ...
- ADFS 4.0 证书更新
ADFS 4.0 证书更新 由于公网证书的过期,需要重新更新ADFS的服务通信证书: 证书要求: 带私钥 PFX格式 更换流程: 证书安装到 证书\计算机\个人,安装后点开证书能看到"你有一 ...
- blueimp,预览遮罩范围控制
blueimg gallery github地址:https://github.com/blueimp/Gallery/blob/master/README.md 使用前提,引用css和js < ...
- sping中 各种注解——@SuppressWarnings注解用法
@SuppressWarnings注解用法 @SuppressWarnings注解主要用在取消一些编译器产生的警告对代码左侧行列的遮挡,有时候这会挡住我们断点调试时打的断点. 如图所示: 这时候我们在 ...
- vue的选项卡功能
选项卡:点击不同的按钮会显示不同的内容 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...