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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 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 8小时时间差的解决方法小结
2009/12/22 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python中Class类用法实例分析
2015/11/12 Python
Python表示矩阵的方法分析
2017/05/26 Python
Django 视图层(view)的使用
2018/11/09 Python
python爬取网易云音乐评论
2018/11/16 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
一组SQL面试题
2016/02/15 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
拉拉队口号
2014/06/16 职场文书
副总经理岗位职责
2015/02/02 职场文书
冰峪沟导游词
2015/02/09 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript