Vue.js 使用v-cloak后仍显示变量的解决方法
更新时间：2018年11月19日 09:20:53 作者：伊见倾橙
这篇文章主要介绍了Vue.js 使用v-cloak后仍显示变量的解决方法 ,文中给大家提到了v-cloak的用法，需要的朋友可以参考下
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响应式原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可任意参考一下,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue解析Json数据获取Json里面的多个id问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
放大镜在很多地方都可以使用的到，本文主要介绍了vue结合leaflet实现地图放大镜，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了Vue子组件监听父组件值的变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以参考下。2017-12-12
websocket通信是很好玩的,也很有用的的通信方式,下面这篇文章主要给大家介绍了关于Vue中前后端使用WebSocket的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
v-model绑定的变量无论是对象还是数组都是绑定的value值,下面这篇文章主要给大家介绍了关于vue中v-model如何绑定多循环表达式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
解决Vue的项目使用Element ui 走马灯无法实现的问题
这篇文章主要介绍了解决Vue的项目使用Element ui 走马灯无法实现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了基于vue手写tree插件的那点事儿，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要介绍了vue data中如何获取使用store中的变量，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论