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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
Prototype框架详解
Nov 25 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php执行sql语句的写法
2009/03/10 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
javascript知识点收藏
2007/02/22 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
python实现网站的模拟登录
2016/01/04 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python实现的生成word文档功能示例
2019/08/23 Python
python 基于opencv操作摄像头
2020/12/24 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
2014政务公开实施方案
2014/02/19 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL