在网络加载缓慢或者刷新的时候总会有那么一瞬间出现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. 28_Future模式1

    [Future模式] Future模式类似商品订单.比如在网购时,当看中一件商品时,就可以提交订单,当订单处理完成后,在家里等待商品送货上门即可.或者类似我们发送Ajax请求的时候,页面是异步的进行后 ...

  2. ArcGIS 编程中对接口的理解

    学习AO,最重要的是理解“接口”这个概念.接口是什么?有什么具体作用?在多种计算机高级语言中,都可以看到“接口”这个术语,但基本上每一本书对“为什么使用接口”等重要文都都“语焉不详”,使得初学者往往不 ...

  3. Android--Otto事件总线 -- 组件之间通讯框架使用 --模式解析

    前言:Otto事件总线 -- 组件之间通讯框架 对于之前的情况activity之间或者fragment之间等跳转传值一般都是用bundle.intent等,从activityA --- activit ...

  4. C++中long是什么类型

    long long本质上还是整型,只不过是一种超长的整型. int型:32位整型,取值范围为-2^31 ~ (2^31 - 1) .long:在32位系统是32位整型,取值范围为-2^31 ~ (2^ ...

  5. 阿里云安装jdk报错gzip: stdin: unexpected end of file

    在阿里云上面安装jdk时候报了这个问题,如下图所示 然后看了下jdk应该是有150多M的,但是阿里云上面的只有1M多,删除 重新下载... tar zxvf jdk 好了

  6. C++ 11: function & bind 使用示例

    #include <functional> #include <iostream> struct Foo { Foo(int num) : num_(num) {} void ...

  7. InputStream中mark方法使用

    在调用mark的地方做上标记,参数readlimit说明在读取readlimit个字符后书签做废(6.0好像没有失效 ,仍然可以标记位置),使用reset后回到标记的位置.import java.io ...

  8. 年金(annuity)

    一.定义 一系列的付款(或收款),付款时间和付款金额具有一定规律性. 二.分类 1-支付时间和支付金额是否确定?确定年金(annuity-certain)风险年金(contingent annuity ...

  9. 美国加拿大著名公共知识分子简·雅各布斯 (Jane Jacobs)的5本书

    作者是美国.加拿大著名公共知识分子.最近看了她的三本书<城市经济><城市与国家财富><经济的本质>.出版社把这三本书归入“城市-经济”三部曲,三本书英文原版的出版日 ...

  10. RequireJS进阶-模块的优化及配置的详解

    概述 关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系 ...