Vue.js 使用v-cloak后仍显示变量的解决方法


Posted in Javascript onNovember 19, 2018

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;
}

经测试,并不会产生副作用。如果大家有更好的方案,欢迎交流。相关截图如下:

Vue.js 使用v-cloak后仍显示变量的解决方法

未使用 !important 前的截图

相关链接:

1. Vue.js 1.0官网 v-cloak说明

总结

以上所述是小编给大家介绍的Vue.js 使用v-cloak后仍显示变量的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 #Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 #Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 #Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 #Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 #Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 #Javascript
Javascript实现动态时钟效果
Nov 17 #Javascript
You might like
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
php合并js请求的例子
2013/11/01 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
params有什么用
2016/03/01 面试题
村级个人对照检查材料
2014/08/22 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
出生公证书
2015/01/23 职场文书
财务负责人岗位职责
2015/02/03 职场文书
绵山导游词
2015/02/05 职场文书
小学生教师节广播稿
2015/08/19 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书