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

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

未使用 !important 前的截图

相关链接:

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

关于Vue.js 使用v-cloak后仍显示变量的解决方法的更多相关文章

  1. vue.js 中使用(...)运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

  2. Vue中swiper手动滑动后不能自动播放的解决方法

    用户操作swiper之后,是否禁止autoplay.默认为true:停止.如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay.操作包括触碰,拖动,点击pa ...

  3. nginx+php-fpm配置后页面显示空白的解决方法以及用nginx和php-fpm解决“502 Bad Gateway”问题

    For reference, I am attaching my location block for catching files with the .php extension: location ...

  4. nginx+php-fpm配置后页面显示空白的解决方法(yum形式的安装)

    OS: Ubuntu 15.04 由于nginx与php-fpm之间的一个小bug,会导致这样的现象: 网站中的静态页面 *.html 都能正常访问,而 *.php 文件虽然会返回200状态码, 但实 ...

  5. Android出现错误后改正后仍显示错误

    今天编Android的时候,layout.xml出现了错误,改正后仍显示错误.试了很多方法. 后来,将原来的复制并删掉,然后再粘贴上去就可以了.

  6. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  7. @Data注解使用后get set报错解决方法

    Maven项目中已经导入相关的lombok.jar包但是使用后仍提示无set/get方法 .在idea中安装如下插件,安装后重启idea可用不报错. 转载于:https://www.cnblogs.c ...

  8. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  9. 网站启动SSL, http变为https后,session验证码错误解决方法

    网站启动SSL, http变为https后,session验证码错误解决方法   最近公司需要后台启动安全证书,证书安装完毕后,后台老提示 验证码错误,经过几天的研究,此问题已经得到有效解决,现把方法 ...

随机推荐

  1. Android音频系统之AudioFlinger(二)

    1.1.1 音频设备的管理 虽然AudioFlinger实体已经成功创建并初始化,但到目前为止它还是一块静态的内存空间,没有涉及到具体的工作. 从职能分布上来讲,AudioPolicyService是 ...

  2. mariadb cache1

    http://www.percona.com/blog/2006/07/27/mysql-query-cache/ MySQL Query Cache July 27, 2006 by Peter Z ...

  3. SqlServer拆分列

    SELECT TOP 1000 substring([a],0,CHARINDEX('/',a)) as low,substring([a],CHARINDEX('/',a)+1,len([a])-C ...

  4. python第一天(文件流以及控制流)简单总结

    第一天的python学习主要是: (1)对python的一个大致了解 值得注意的是在window下开发要注意path的问题. (2)对python控制流的一个了解 常用的if ,while ,for ...

  5. office web apps部署(二)

    1.安装composer 参考 http://docs.phpcomposer.com/00-intro.md 根据系统选择安装方式 修改php.ini   去掉extension=php_opens ...

  6. windows矢量字体点阵数据的提取(转)

    源:windows矢量字体点阵数据的提取 问题参考:windows api 获取字库点阵的问题 1.提取原理 在windows系统当中提取矢量字体的字模有很多方法,下面介绍一种利用GetGlyphOu ...

  7. 51nod1138(math)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1138 题意:中文题诶- 思路:假设 x=a1+(a1+1)+ ...

  8. SecureCRT上传bash: rz: command not found

    SecureCRT上传bash: rz: command not found -bash: rz: command not found rz命令没找到? 执行sz,同样也没找到.     安装lrzs ...

  9. java 自动备份MySQL 数据库(转载)

    1 package com.learn4j.bat; public class Backup { private String user_name;// 数据库用户名 private String u ...

  10. FZU 2101 大三的美好时光

    DP+离散化. 首先需要把时间离散化,剩下的就是简单DP. 还要判断哪些选修课与必修课时间有重合,我用了前缀和来处理. 注意:这题时间端点也不能重合. #include<cstdio> # ...