Vue.js 使用v-cloak后仍显示变量的解决方法
作者:伊见倾橙 时间:2024-06-07 15:20:56
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后仍显示变量的解决方法网站的支持!
来源:https://www.cnblogs.com/cjlll/p/6077430.html
标签:vue.js,v-cloak,变量
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Go压缩位图库roaring安装使用详解
2024-05-22 10:16:42
![](https://img.aspxhome.com/file/2023/4/123904_0s.jpg)
Python实现从文件中加载数据的方法详解
2022-05-28 12:41:31
![](https://img.aspxhome.com/file/2023/0/107960_0s.png)
Python一行代码实现自动发邮件功能
2021-04-06 06:04:38
![](https://img.aspxhome.com/file/2023/6/107016_0s.png)
属性与 @property 方法让你的python更高效
2023-02-02 08:20:18
Python数据类型详解(二)列表
2021-10-26 08:47:11
python中 @的含义以及基本使用方法
2022-12-24 04:58:48
YiiFramework入门知识点总结(图文教程)
2023-11-20 18:41:03
![](https://img.aspxhome.com/file/2023/4/88274_0s.jpg)
python 远程统计文件代码分享
2023-04-13 17:02:08
Python函数参数类型*、**的区别
2022-03-01 18:09:54
Python项目打包成二进制的方法
2023-11-07 05:22:02
Python数据分析之Python和Selenium爬取BOSS直聘岗位
2021-04-27 08:53:19
![](https://img.aspxhome.com/file/2023/4/110294_0s.png)
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2021-01-12 08:30:45
Python实现带图形界面的炸金花游戏(升级版)
2023-06-27 08:35:20
![](https://img.aspxhome.com/file/2023/9/79559_0s.jpg)
vue中v-show和v-if的异同及v-show用法
2023-07-02 17:09:11
python入门之算法学习
2021-05-16 19:38:19
Sun拟10亿美元收购MySQL
2008-01-17 11:56:00
如何使用Python自动生成报表并以邮件发送
2021-07-20 08:51:06
SQL Server 数据库基本操作语句总结
2024-01-18 05:12:06
Python的条件锁与事件共享详解
2021-12-16 22:02:23
Python数据结构之树的全面解读
2021-12-26 14:32:01
![](https://img.aspxhome.com/file/2023/2/117922_0s.jpg)