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 相关文章推荐
JS代码放在head和body中的区别分析
Dec 01 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JavaScript知识点整理
Dec 09 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
vue实现评论列表功能
Oct 25 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php随机取mysql记录方法小结
2014/12/27 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
javascript 数组的方法集合
2008/06/05 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
jQuery的框架介绍
2016/05/11 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
Javascript实现基本运算器
2017/07/15 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python应用库大全总结
2018/05/30 Python
Python语言进阶知识点总结
2019/05/28 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
保荐人的岗位职责
2013/11/19 职场文书
致裁判员加油稿
2014/02/08 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
社区平安建设方案
2014/05/25 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2015年中秋节主持词
2015/07/30 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
python​格式化字符串
2022/04/20 Python
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python