在网络加载缓慢或者刷新的时候总会有那么一瞬间出现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. Windows API 编程----将错误代码转换成错误描述信息

    Windows编程有时会因为调用函数而产生错误,调用GetLastError()函数可以得到错误代码.如果错误代码为0,说明没有错误:如果错误代码不为0,则说明存在错误. 而错误代码不方便编程人员或用 ...

  2. Repeat Number(数论)

    Repeat Number 题目描述: Definition: a+b = c, if all the digits of c are same ( c is more than ten), then ...

  3. C++格式化代码,去掉vs2010编辑器里中文注释的红色波浪线

    原文:http://sulianqi.cn/Article/ART2013053100001.html Vs2010中C++没有智能感应提示,不习惯,于是装了个番茄插件(Visual Assist x ...

  4. AndroidStudio安装教程

    Android studio安装与配置 1.首先下载Android studio安装包,可以从http://www.android-studio.org/ 2.下载好该安装包之后,点击进行安装,依次出 ...

  5. linux 安装源码后的操作 ldconfig

    https://blog.csdn.net/cqkxboy168/article/details/8657487 知识点: .如果使用 ldd 命令时没有找到对应的共享库文件和其具体位置,可能是两种情 ...

  6. libcurl 使用

    关于libcurl的文章网络上很多, 这里不再描述. 以下是如何使用libcurl的例子.   一.常用函数     1) libcurl的全局初始化及释放 CURLcode curl_global_ ...

  7. tdd:(react + mocha)环境配置

    写在前面: 在git上面clone一些项目的时候老是可以看到一些测试文件,于是就学习了一下TDD: TDD —— Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核 ...

  8. create-react-native-app

    create-react-native-app官网介绍链接,github文档,可以看看了解一下,总之是一个5分钟快速搭建react native项目并能看到效果的方法. 假设你已经安装了Node,你可 ...

  9. 从Microsoft SQL Server迁移到MySQL指南

    转自 https://www.mysql.com/why-mysql/white-papers/sql-server-to-mysql-zh/ 由于 MySQL 将节约成本.自由选择平台.特性丰富等优 ...

  10. Hadoop HA集群的搭建

    HA 集群搭建的难度主要在于配置文件的编写, 心细,心细,心细! ha模式下,secondary namenode节点不存在... 集群部署节点角色的规划(7节点)------------------ ...