在网络加载缓慢或者刷新的时候总会有那么一瞬间出现vue的模板代码,实在很影响美观,对于我这种有强迫症的人来说实在是忍无可忍,后来经过查找资料,终于发现了解决方法,可以使用vue现成的指令来解决这个问题:v-cloak

首先在css中加入:

 [v-cloak]{
 display: none;
}

然后需要在元素加上:

 <div v-cloak>
{{demo}}
</div>

这样,v-cloak所在元素下的变量在未渲染前是不会显示的。

解决vue变量未渲染前代码显示问题的更多相关文章

  1. 解决vue视图不渲染

    动态添加对象属性 //声明var travelMainVueObj;travelMainVueObj = new Vue({ "el" : "#portletConten ...

  2. vue 实例未加载完成显示 花括号解决方案

    css [v - cloak] { display: none!important; } html < div id = "app" v-cloak >

  3. 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题

    解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...

  4. 解决使用 Eruda 绑定 dom 未在指定位置显示问题

    前言 开发项目中,使用到 Eruda 打印控制台信息显示 文档:https://github.com/liriliri/eruda 安装 Eruda npm install eruda --save ...

  5. 解决vue数据渲染过程中的闪动问题

    关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...

  6. vue数据已渲染成 但还是报错 变量 undefined

    问题:页面上的数据已渲染出来,但是控制台还是报错变量未undefined,主要是当页面加载完成后,数据并未加载完,所以会报次错误. 解决办法:在数据渲染的主节点(最外层的div)添加 v-if=“da ...

  7. Vue部分编译不生效,解决Vue渲染时候会闪一下

    0828自我总结 Vue部分编译不生效,解决Vue渲染时候会闪一下 一.Vue编译不生效 在标签里添加v-pre <script src="vue.js"></s ...

  8. 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

    https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...

  9. 当Vue中img的src是动态渲染时不显示问题

    最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如 ...

随机推荐

  1. HTML5学习笔记之canvas

    标签 canvas标签有一个默认宽高:300*150: canvas的宽高一般写到行间样式中,写在style会有问题详细请看这里: 绘制环境 要绘图先要获取到绘制环境: var oC = docume ...

  2. WinAPI: GetCurrentThread、GetCurrentThreadId、GetCurrentProcess、GetCurrentProcessId

    原文:http://www.cnblogs.com/del/archive/2008/03/10/1098311.html {返回当前线程的虚拟句柄} GetCurrentThread: THandl ...

  3. GetVersion和GetVersionEx

    原文:http://www.cnblogs.com/VOIP/archive/2011/03/22/1990927.html Windows API 中有两个函数可以得到系统版本信息:GetVersi ...

  4. 【Android】Android studio 编译问题:finished with non-zero exit value 2

    1.Android studio 编译问题:finished with non-zero exit value 2 问题: Error:Execution failed for task ':andr ...

  5. 【Udacity】朴素贝叶斯

    机器学习就像酿制葡萄酒--好的葡萄(数据)+好的酿酒方法(机器学习算法) 监督分类 supervised classification Features -->Labels 保留10%的数据作为 ...

  6. 常用APDU指令错误码

    状态码 性质 错误解释 9000 正常 成功执行 6200 警告 信息未提供 6281 警告 回送数据可能出错 6282 警告 文件长度小于Le 6283 警告 选中的文件无效 6284 警告 FCI ...

  7. canvas.addEventListener()

    对 canvas 元素的事件监听用addEventListener()实现, 但是有一点缺陷是:canvas 不支持键盘事件,为了解决这个问题,可以采用以下两种方案: 方案一: key event - ...

  8. javascript 匿名函数及闭包----转载

    网上很多解释,我无法理解,我想知道原理...这篇文章应该可以透彻一点Query片段:view plaincopy to clipboardprint? (function(){      //这里忽略 ...

  9. 基于bootstrap的单选(radio)或者多选(checkbox)的选择框组

    完成的效果如下图所示: html代码如下: <!-- 两行组 --> <div class="box"> <ul class="list-g ...

  10. Oracle 时段负载情况

    ALTER session SET nls_date_format='yyyy-mm-dd hh24:mi:ss'; SELECT *  FROM ( SELECT A.INSTANCE_NUMBER ...