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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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程序员应具有的7种能力小结
2014/11/27 PHP
php中switch语句用法详解
2015/08/17 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
python追加元素到列表的方法
2015/07/28 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
《动手做做看》教学反思
2014/04/09 职场文书
司法所长先进事迹
2014/06/02 职场文书
英语专业自荐书
2014/06/13 职场文书
教育读书笔记
2015/07/02 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python
canvas 中如何实现物体的框选
2022/08/05 Javascript