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怎么解决路由跳转时及跳转到外部链接,再返回的页面缓存问题
vue 调用后端接口导出excel无效果,直接访问后端url可以
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
解决vue动态路由异步加载import组件,加载不到module的问题
网友评论