Vue.js 使用v-cloak后仍显示变量的解决方法
2019-03-28 10:58
531 查看
Vue.js 使用v-cloak后仍显示变量的解决方法
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后仍显示变量的解决方法
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- 关于Vue.js 使用v-cloak后仍显示变量的解决方法
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】
- 解决使用Vue.js显示数据的时,页面闪现原始代码的问题
- 使用Vue.js加sass时遇到 Invalid CSS after ".xxx{": expected "}", was "{" 错误的解决方法
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
- UEditor 的表格加载正常,第二次却显示不出来,vue.js里面的解决方法
- 使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
- Vue.js由于延时显示了{{message}}引用界面解决方法
- 解决“UIkit与Vue.js结合使用时,UIkit的图标会显示两个”的问题
- 解决使用Vue.js显示数据的时,页面闪现原始代码
- 解决使用Vue.js显示数据的时,页面闪现原始代码
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法