<!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>

         <!-- v-bind：是Vue中，提供用于绑定属性的指令 -->

         <!-- <input type="button" value="按钮" v-bind:title="mytitle+'123' "> -->

         <!-- 注意：v-bind:  指令可以被简写为：要绑定的属性 -->

         <!-- v-bind 中，可以写合法的js表达式 -->

         <input type="button" value="按钮" :title="mytitle+'123' ">

       </div>

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

       <script>

           var vm =  new Vue({

               el:'#app',

         data:{

           msg:'123',

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

           mytitle:'这是一个自己定义的title'

         }

           })

       </script>

   </body>

 </html>

第二章 Vue快速入门--8 v-bind指令的学习的更多相关文章

  1. 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Linux 安装 openoffice

    1 说明 本文档采用rpm包方式安装,操作系统为centos 2 下载openoffice rpm包 创建nginx源码包存放目录 mkdir /usr/local/src/openoffice cd ...

  2. Linux用户管理重要初始化目录skel案例讲解

    1.  /etc/skel 目录 /etc/skel 的场景作用

  3. 【转帖】刘备三顾茅庐，请Elasticsearch出山

    刘备三顾茅庐,请Elasticsearch出山 2019-08-08 18:31 https://www.sohu.com/a/332454886_463994?spm=smpc.author.fd- ...

  4. java 基础（一）-实验楼

    一.标识符:区分大小写由数字.大小写字母.$._ 组成,不能由数字开头.各种变量.方法和类等要素命名时使用的字符序列称.凡是自己可以起名字的地方都叫标识符.不可以使用关键字和保留字,但能包含关键字和保 ...

  5. 大数据备忘录———将数据从oracle导入impala中

    上周遇到了将数据从oracle导入到impala的问题,这个项目耽误了我近一周的时间,虽然是种种原因导致的,但是还是做个总结. 需求首先是跑数据,跑数据这个就不叙述,用的是公司的平台. 讲讲耽误我最久 ...

  6. ale.js 对比其他框架

    欢迎!我们相信你来这里的目的就是为了解 Ale 与其他大型框架的区别,这也正是我们想要在此回答的. 客观来说,作为 Ale 的核心开发者,我们肯定会更偏爱 Ale,认为对于某些问题来讲用 Ale 解决 ...

  7. Java 反射理解（二）-- 动态加载类

    Java 反射理解(二)-- 动态加载类 概念 在获得类类型中,有一种方法是 Class.forName("类的全称"),有以下要点: 不仅表示了类的类类型,还代表了动态加载类 编 ...

  8. 超链接hover切换效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta na ...

  9. winform messageBox.Show()

    MessageBox.Show(" 5 个参数...... ",     " 亮仔提示",     MessageBoxButtons.OKCancel,    ...

  10. 【原创】大叔经验分享（67）spring boot启动报错

    spring boot 启动报错: Caused by: java.lang.IllegalArgumentException: LoggerFactory is not a Logback Logg ...