关于Vue.js 使用v-cloak后仍显示变量的解决方法
2016-11-18 13:39
1226 查看
v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?。
v-cloak 用法:
HTML代码:
<div v-cloak> {{ message }} </div>
CSS代码:
[v-cloak] { display: none; }
这样直至div内变量编译完毕后才会显示。
但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致,我的处理方案是添加 !important ,简单粗暴。新css样式如下:
[v-cloak] { display:none !important; }
经测试,并不会产生副作用。如果大家有更好的方案,欢迎交流。相关截图如下:
未使用 !important 前的截图
相关链接:
相关文章推荐
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- 【原创】关于在Android中使用Google Map只显示网格问题的解决方法
- UEditor 的表格加载正常,第二次却显示不出来,vue.js里面的解决方法
- 使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- 关于ajax页面里的js方法无法使用的解决办法
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决方法
- 关于使用imag.js出现的问题及解决方法(连载2)
- 关于使用NotificationComat导致android2.3及以下版本无法显示自定义布局的解决方法.
- 关于通过网页查看JS源码中汉字显示乱码的解决方法
- 关于在extjs中使用column布局,不能显示textfield的标签(fieldLabel)解决方法
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- 使用Vue.js加sass时遇到 Invalid CSS after ".xxx{": expected "}", was "{" 错误的解决方法
- 使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
- 数据采集-关于密码使用js脚本进行rsa方式加密的解决方法
- 我的Android进阶之旅------>关于使用Android Studio替换App的launcher图标之后仍然显示默认的ic_launcher图标的解决方法
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法