时间:2021-05-26
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 前的截图
相关链接:
1. Vue.js 1.0官网 v-cloak说明
总结
以上所述是小编给大家介绍的Vue.js 使用v-cloak后仍显示变量的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
先来看下vue.js中的v-cloak指令可以使用v-cloak指令设置样式,这些样式会在Vue实例编译结束时,从绑定的HTML元素上被移除。当网络较慢,网页还
添加css[v-cloak]{display:none;}给vue对象加上v-cloak{{message}}以上这篇快速处理vue渲染前的显示问题就是小编分享
v-cloak当用户频繁刷新页面或网速慢时,页面未完成Vue.js的加载时,导致Vue来不及渲染,这就会导致在浏览器中直接暴露插值(表达式),Vue由此也给出了
简介:transition方法的使用transition内置方法transition-groupanimate库实现过渡动画Document[v-cloak]{
如下所示:[v-cloak]{display:none}v-cloakv-textv-htmlv-cloak用于大段v-text用于单个标签v-html用于带有