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. Ingreslock后门漏洞

    一.简介 1524端口 ingreslock Ingres 数据库管理系统(DBMS)锁定服务 利用telnet命令连接目标主机的1524端口,直接获取root权限. Ingreslock后门程序监听 ...

  2. 【VS开发】【DSP开发】WinDriver简介（或介绍）

    WinDriver for Windows简化并自动化了用户模式Windows设备驱动程序的开发,支持设备包括PCI / CardBus / ISA/ PCI-104 / PCMCIA * / PMC ...

  3. vue中的样式穿透

    参考一下的文章即可: https://www.cnblogs.com/karthuslorin/p/9038854.html http://www.php.cn/js-tutorial-399072. ...

  4. vue加scoped后无法修改样式（无法修改element UI 样式）

    有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...

  5. RestTemplateBuilder类

    Spring Boot使用RestTemplate消费REST服务的几个问题记录 我们可以通过Spring Boot快速开发REST接口,同时也可能需要在实现接口的过程中,通过Spring Boot调 ...

  6. 使用JedisPool资源池操作Redis，并进行性能优化

    一.使用方法 ----------------------------------------- private volatile static JedisPool pool = null; //本地 ...

  7. tp5支付宝和微信支付

    一.生成二维码给用户进行扫码支付 1.先在vendor目录下加入支付宝和微信支付的引用 2.付款处调用 /** * 订单支付接口 * * @api {post} {:url('order/pay')} ...

  8. django初步了解3

    目录 JsonResponse模块 form表单上传文件 FBV与CBV django settings源码分析及实际应用 模板语法 模板传值 模板过滤器 标签 if标签 for标签 with标签 自 ...

  9. HTML DOM focus() 方法

    目录 HTML DOM focus() 方法 实例 定义和使用 浏览器支持 语法 参数 技术描述 更多实例 实例 实例 HTML DOM focus() 方法 实例 为 <a> 元素设置焦 ...

  10. how to Simply Singleton Navigate the deceptively simple Singleton pattern---reference

    http://www.javaworld.com/article/2073352/core-java/simply-singleton.html JAVA DESIGN PATTERNS By Dav ...