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. 如何限制nginx的响应速率

    参考官方地址:http://nginx.org/en/docs/http/ngx_http_core_module.html#variables 用$limit_rate内置的变量可以限制nginx的 ...

  2. 使用Python执行dos命令并获取输出的结果

    import os import subprocess # 第一种 result1 = subprocess.check_output('dir').decode('GBK') print(resul ...

  3. day37 GIL、同步、异步、进程池、线程池、回调函数

    1.GIL 定义: GIL:全局解释器锁(Global Interpreter Lock) 全局解释器锁是一种互斥锁,其锁住的代码是全局解释器中的代码 为什么需要全局解释器锁 在我们进行代码编写时,实 ...

  4. 生产环境Crontab专业实例

    1)书写Crontab定时任务多个基本要领 1.规范定时任务两例 例1:每分钟打印一次自己名字的全拼到 “/server/log/自己命名的文件” 中

  5. jps 命令

    NAME jps - Lists the instrumented Java Virtual Machines (JVMs) on the target system. This command is ...

  6. Redis（1.8）Redis与mysql的数据库同步（缓存穿透与缓存雪崩）

    [1]缓存穿透与缓存雪崩 [1.1]缓存和数据库间数据一致性问题 分布式环境下(单机就不用说了)非常容易出现缓存和数据库间的数据一致性问题,针对这一点的话,只能说,如果你的项目对缓存的要求是强一致性的 ...

  7. sysbench压力测试工具简介

    一.sysbench压力测试工具简介: sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL. ...

  8. CA机构及SSL证书

    互联网安全形势日趋严峻,企业重视自身互联网安全已成必然,SSL认证成大势所趋.要部署SSL证书最首先就是选好CA机构!其次选择适合自己的SSL证书!今天就来介绍一下如何选择CA机构及SSL证书! 首先 ...

  9. Java异常模块

    JAVA异常的捕获与处理 视频链接:https://edu.aliyun.com/lesson_1011_8939#_8939 java语言提供最为强大的支持就在于异常的处理操作上. 1,认识异常对程 ...

  10. javascript——创建对象的方式

    对象:在JavaScript中,对象是拥有属性和方法的数据. JavaScript自定义对象方式有以下7种:直接创建方式.对象初始化器方式.构造函数方法.prototype原型方式.混合的构造函数/原 ...