<!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. 【VS开发】学习VS2010 ------ 多种类型的视图集合CTabView

    多种类型的视图集合CTabView 首先利用AppWizard建立工程,然后将视类的基类更改为CTabView,并将所有的CView更改为CTabView. 依次插入以CSrollView.CList ...

  2. Infix to Prefix conversion using two stacks

    Infix : An expression is called the Infix expression if the operator appears in between the operands ...

  3. 【深入浅出-JVM】（1）：Java 虚拟机

    Java 虚拟机地位 种类 BEA的JRockit Solaris的Exact VM IBM的J9 感谢您的耐心阅读,如果您发现文章中有一些没表述清楚的,或者是不对的地方,请给我留言,您的鼓励是作者写 ...

  4. SpringBoot起飞系列-国际化（六）

    一.前言 国际化这个功能可能我们不常用,但是在有需要的地方还是必须要上的,今天我们就来看一下怎么在我们的web开发中配置国际化,让我们的网站可以根据语言来展示不同的形式.本文接续上一篇SpringBo ...

  5. Spring系列二：IoC 容器

    还君明珠双泪垂,恨不相逢未嫁时. 概述 Spring IoC容器是Spring框架的核心.只需要进行简单的容器配置,就可以将创建对象,使用对象,销毁对象联系在一起,从而管理从创建对象到销毁对象的整个生 ...

  6. vim 常用基本

    vim 基本操作 0. 基本操作 :w // 保存当前文件 :q // 退出vim :wq // 保存退出 :w! // 强制保存当前文件 :q! // 强制退出(可以忽略修改) :!cmd // 执 ...

  7. NOIP模拟赛 打铁的匠 题解

    [问题描述] Mark Douglas是一名优秀的锻造师.与他优秀的锻造水平不相符,他非常穷,以至于很多好刀都因为缺少素材缺少资金无法打造. Mark把他有能力锻造的所有n种刀建成了一棵锻造树,除了第 ...

  8. Web安全微专业正式课 大纲(图片)

    如果想报名学习,可以联系我.QQ:1097321785.

  9. CentOS7下使用ELK搭建日志集中分析平台

    应用场景: ELK实际上是三个工具的集合,ElasticSearch + Logstash + Kibana,这三个工具组合形成了一套实用.易用的监控架构,很多公司利用它来搭建可视化的海量日志分析平台 ...

  10. ztree树id、pid转成children格式的(待整理完整)

    山铝菜单 因为菜单选用了bootstrap treeview ,而格式需要是children类似的格式 var nodes = [ {name: "父节点1", children: ...