v-cloak：保持和元素实例的关联，直到结束编译后自动消失。

v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）。

就拿上一段代码来举例，比如说，{{name}}这个内容，在网速很慢的情况下，一开始会直接显示{{name}}这个内容，等网络加载完成了，才会显示smyhvae。那这个闪烁的问题该怎么解决呢？

解决办法是：通过v-cloak隐藏{{name}}这个内容，当加载完毕后，再显示出来。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    /*2、在样式表里设置：只要是有 v-cloak 属性的标签，我都让它隐藏。

    直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */

    [v-cloak] {

      display: none;

    }

  </style>

</head>

<body>

  <div id="app">

    <!-- 1、给 span 标签添加 v-cloak 属性 -->

    <span v-cloak>{{name}}</span>

  </div>

</body>

<script src="//unpkg.com/vue/dist/vue.js"></script>

<script>

  new Vue({

    el: '#app',

    data: {

      name: 'sloanlv'

    }

  });

</script>

</html>

v-cloak使用的更多相关文章

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

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

  2. J a v a 的“多重继承”

    接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...

  3. Exception in thread "main" java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V

    在学习CGlib动态代理时,遇到如下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.objectwe ...

  4. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

  5. v$session中server为none与shared值解析

    查询V$SESSION,你会看到SERVER可能会有DEDICATED| SHARED| PSEUDO| NONE 四种值,如果SERVER字段的值除了DEDICATED,还有NONE,则说明当前实例 ...

  6. 引用js或css后加?v= 版本号的用法

    <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...

  7. 操作系统中的P,V操作（转）

    无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...

  8. 关于P,V操作理解的突破，关于并发设计与并行

    今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...

  9. XV Open Cup named after E.V. Pankratiev. GP of Tatarstan

    A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...

  10. XVII Open Cup named after E.V. Pankratiev. GP of SPb

    A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...

随机推荐

  1. NCRE Java二级备考方案

    一 配合大纲梳理基本知识点 二 多在233网校刷题

  2. 一名资深架构师规划Java程序员五年职业生涯指南

    每个程序员.或者说每个工作者都应该有自己的职业规划,如果你不是富二代,不是官二代,也没有职业规划,希望你可以思考一下自己的将来.今天我给大家分享的是一篇来自阿里大牛对五年工作经验程序员的职业建议,希望 ...

  3. dwz框架

    官网:http://jui.org/index_menu.html PDF教程:http://jui.org/doc/dwz-user-guide.pdf DWZ最大的特点是使用html扩展的方式来代 ...

  4. mysql时间类型总结及常用时间函数

    日期时间和类型 常用日期和时间类型 字节 year                1       表示年份                   值范围:(1901----2155) date     ...

  5. C# 串口编程，扫码枪使用

    一.串口通信简介 串行接口(串口)是一种可以将接受来自CPU的并行数据字符转换为连续的串行数据流发送出去,同时可将接受的串行数据流转换为并行的数据字符供给CPU的器件.一般完成这种功能的电路,我们称为 ...

  6. ZOJ 3765 Lights （zju March I）伸展树Splay

    ZJU 三月月赛题,当时见这个题目没辙,没学过splay,敲了个链表TLE了,所以回来好好学了下Splay,这道题目是伸展树的第二题,对于伸展树的各项操作有了更多的理解,这题不同于上一题的用指针表示整 ...

  7. （4）关于Alpha通道问题

    其实,我还是不理解,我还是先把我目前懂得和觉得有用的东西先存下来 =================================================================== ...

  8. 吴裕雄--天生自然MySQL学习笔记：MySQL 元数据

    你可能想知道MySQL以下三种信息: 查询结果信息: SELECT, UPDATE 或 DELETE语句影响的记录数. 数据库和数据表的信息: 包含了数据库及数据表的结构信息. MySQL服务器信息: ...

  9. tomcat8.5的安装、卸载、配置和部署

    安装和卸载 下载 http://tomcat.apache.org/ 环境变量 1.点击此电脑 右键—>属性. 2.创建变量名为CATALINA_HOME,的值为所解压安装tomcat的本地目录 ...

  10. yum无法安装nginx，报错内容为1:nginx-1.14.2-1.el7_4.ngx.x86_64: [Errno 5] [Errno 2] 没有那个文件或目录

    yum命令安装nginx时报错:1:nginx-1.14.2-1.el7_4.ngx.x86_64: [Errno 5] [Errno 2] 没有那个文件或目录 一.问题原因:Python版本的问题 ...