<!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. 算法巩固的第一天-java冒泡排序算法

    自媒体萌新一枚,不对的地方各路大神可以指点指点!个人理解: 冒泡排序算法<插入排序算法<快速排序算法 /** * 冒泡排序算法 * @author sj * */ public class ...

  2. Docker 运行 MYSQL 数据库的总结

    公司里面要求做一个小demo 学习java相关的东西 然后使用了mysql数据库 很早之前做过mysql的容器化运行. 现在想想已经忘记的差不多了  所以这里总结一下 docker化运行mysql数据 ...

  3. Linux系列之ftp

    ftp的详细用法,请访问https://www.cnblogs.com/juandx/p/3998418.html 1.Windows搭建IIS类型的ftp服务器 步骤 1.打开控制面板,接着打开程序 ...

  4. drf框架的模块分析

    请求模块 请求模块是个什么鬼 ''' 1.drf的request是在wsgi的request基础上再次封装 2.wsgi的request作为drf的request一个属性:_request 3.新的r ...

  5. C/S软件方案

    互联网时代客户端软件的一些方案 纯Native开发, C++/C#/duilib+C++(Windows), Objective-c(Mac) Qt(Windows/Mac) NW.js/Electr ...

  6. 并不对劲的bzoj4538:loj2049:p3250:[HNOI2016]网络

    题意 有一棵\(n\)(\(n\leq 10^5\))个点的树,\(m\)(\(m\leq 2\times 10^5\))个操作.操作有三种:1.给出\(u,v,k\),表示加入一条从\(u\)到\( ...

  7. Java EE javax.servlet.http中的HttpSession接口

    HttpSession接口 public interface HttpSession (https://docs.oracle.com/javaee/7/api/javax/servlet/http/ ...

  8. Neo4j Cypher语法（三）

    目录 5 函数 5.1 谓词函数 5.2 标量函数 5.3 聚合函数 5.4 列表函数 5.5 数学函数 5.6 字符串函数 5.7 Udf与用户自定义函数 6 模式 6.1 索引 6.2 限制 7 ...

  9. [C#.net]连接Oracle的几种方式

    一:通过System.Data.OracleClient(需要安装Oracle客户端并配置tnsnames.ora)1. 添加命名空间System.Data.OracleClient引用2. usin ...

  10. bat 将war文件转换成ear文件

    1.无需拷贝war文件,自动获取war set path=%path%;D:\jdk\jdk1.6.0_31\bin;C:\Program Files\7-Zip del **0001-control ...