7 讲解v-cloak、v-text、v-html的基本使用

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

   <style>

     [v-cloak]{

       display: none;

     }

   </style>

   </head>

   <body>

       <div id="app">

      <!--  使用v-cloak能够解决插值表达式闪烁的问题 -->

       <p v-cloak>{{msg}}</p>

       <h4 v-text="msg"></h4>

      <!--  默认v-text是没有闪烁问题的 -->

     <!--  v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个 占位符，不会把整个元素内容清空 -->

         <div>{{msg2}}</div>

         <div v-text="msg2"></div>

         <div v-html="msg2"></div>

       </div>

   <script src="./lib/vue-2.6.10.js"></script>

       <script>

           var vm =  new Vue({

               el:'#app',

         data:{

           msg:'123',

           msg2:'<h1>哈哈，我是h1</h1>'

         }

           })

       </script>

   </body>

 </html>

第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用的更多相关文章

  1. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 第二章 Vue快速入门--14 使用v-model实现计算器的案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 第二章 Vue快速入门--12 事件修饰符的介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Opencv 简单视频播放器

    // C++ header and namespace #include <iostream> #include <string> #include <cstdlib&g ...

  2. Spring+SpringMvc+Hibernate整合记录

    Spring+SpringMvc+Hibernate+Maven整合各大配置文件记录 1.Idea新建的Maven架构 2.Maven的对象模型的内容 <project xmlns=" ...

  3. SQLite基础-4.数据定义语言(DDL)

    目录 一.创建数据库 1. 创建方式 2. 数据库命名规范 二. 创建表 1. 基本用法 2. 数据表命名规范 3. 字段命名规范 三. 删除表 一.创建数据库 1. 创建方式 在第二章中我们讲了如何 ...

  4. 谈谈Java中的集合list、set、map之间的区别

    参考文献:https://www.cnblogs.com/IvesHe/p/6108933.html 我这里只总结其区别,具体的说明,请查看参考文献,讲的很详细. A.list接口,实现子类有:arr ...

  5. 「java.util.concurrent并发包」之 CyclicBarrier

    一 描述 CyclicBarrier初始化时规定一个数目,然后计算调用了CyclicBarrier.await()进入等待的线程数.当线程数达到了这个数目时,所有进入等待状态的线程被唤醒并继续.Cyc ...

  6. Elasticsearch多集群数据同步

    有时多个Elasticsearch集群避免不了要同步数据,网上查找了下数据同步工具还挺多,比较常用的有:elasticserach-dump.elasticsearch-exporter.logsta ...

  7. 两个链表的第一个公共结点——牛客offer

    题目描述: 输入两个链表,找出它们的第一个公共结点. 题目分析: 只是数据域相同不是公共节点.公共结点代表该节点在两个链表中的数据域和指针域都是相同的,这意味着从该公共节点开始,后面的结点都是两个链表 ...

  8. Codeforces 1236E. Alice and the Unfair Game

    传送门 首先可以注意到对于固定的起点 $S$ ,它最终能走到的终点一定是一段区间 这个用反证法容易证明,假设合法区间存在断点,这个点左右都可以作为终点 那么分成区间断点在起点左边和起点右边讨论一下即可 ...

  9. windows下 qt5&vs2010 在qtCreator下中文乱码

    环境:windows2012下 qt5.3.1 & vs2010 在qtCreator3.1.2下中文乱码 解决方法:在相关文件中加入代码 #ifdef Q_OS_WIN32 #if _MSC ...

  10. linux系统TCP协议之Send（转）

    tcp协议本身是可靠的,并不等于应用程序用tcp发送数据就一定是可靠的.不管是否阻塞,send发送的大小,并不代表对端recv到多少的数据. 在阻塞模式下, send函数的过程是将应用程序请求发送的数 ...