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. Leetcode之动态规划（DP）专题-714. 买卖股票的最佳时机含手续费（Best Time to Buy and Sell Stock with Transaction Fee）

    Leetcode之动态规划(DP)专题-714. 买卖股票的最佳时机含手续费(Best Time to Buy and Sell Stock with Transaction Fee) 股票问题: 1 ...

  2. 面试总结 | 百度 NLP 实习生

    1. 项目简历:主要体现和招聘要求相关的工作,简历要精简,不要给过多冗余信息.对于每个项目,自己做过的工作,里面用到的方法,要很清楚,工作的motivation.意义等也要清楚. 这次面试中我的问题: ...

  3. Nuxt的动态路由及路由校验入门

    其实动态路由就是带参数的路由.比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了. 新闻详细页面我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动 ...

  4. [转帖]AMD第三代锐龙处理器首发评测：i9已无力招架

    AMD第三代锐龙处理器首发评测:i9已无力招架 Intel 从之前的 CCX 到了 CCD 增加了缓存 改善了 ccx 之间的延迟. https://baijiahao.baidu.com/s?id= ...

  5. windows 安装jenkins

    本文简单记录 windows 安装 jenkins. 1. 下载jenkins安装包,下载地址:https://jenkins.io/index.html 2. 选择下载windows版 3. 解压, ...

  6. Mysql-Sqlalchemy-多表操作

    import sqlalchemy from sqlalchemy import create_engine from sqlalchemy.ext.declarative import declar ...

  7. go get 安装一个特定版本的包失败解决方法

    场景描述 go get 下载第三方包golang gin框架时,会去下载gopkg.in/go-playground/validator.v8包以及gopkg.in/yaml.v2包,gopkg.in ...

  8. 怎样禁止 html 中 <textarea> 标签可以拉伸改变大小 ?

    1. 一般来说, 使用 <textarea> 这个标签都会禁用掉它的这个默认属性, 不然可能会被用户玩儿坏, 而且也不利于其他元素的展示, 使用到的属性是 resize , 改为 none ...

  9. 【原创】大叔经验分享（66）docker启动tomcat不输出catalina.out

    docker启动tomcat默认是: Run the default Tomcat server (CMD ["catalina.sh", "run"]): 查 ...

  10. centos7上的firewalld 的使用

    #centos7上的firewalld 的使用 一.firewalld的基本启动关闭命令 启动服务------systemctl start firewalld 关闭服务------systemctl ...