<!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. 支付宝网站即时支付开发，MD5加签名规则处理代码展示

    一.如果传入进来的Object对象,最后生成制定格式的字符换 text: list拼接成字符串,map中的所有元素,按照“参数=参数值”的模式用“&”字符拼接成字符串,list的元素之间用“| ...

  2. 洛谷P1088 火星人

    //其实就是全排列 //我们从外星人给的那串数字往下搜索 //一直往下拓展m次 //最后输出结果 //虽然看起来很暴力,但是题目上说了m非常小 #include<bits/stdc++.h> ...

  3. python 基础（十九）--re正则表达式模块

    正则表达式模式 模式 描述 ^ 匹配字符串的开头 $ 匹配字符串的末尾. . 匹配任意字符,除了换行符,当re.DOTALL标记被指定时,则可以匹配包括换行符的任意字符. [...] 用来表示一组字符 ...

  4. LeetCode 141 ——环形链表（JAVA）

    给定一个链表,判断链表中是否有环. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 -1,则在该链表中没有环. 示例 1: 输入: ...

  5. JWT的认识和session的区别

    1.前后端分离框架中前端和后端域名不同,不能跨域请求,加上移动端无cookie,所以无法使用session.2.基于token的认证和传统的session认证的区别: 传统的session认证: 我们 ...

  6. 9-Perl 条件语句

    1.Perl 条件语句Perl 条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块.注意,数字 0, 字符串 '0' . "" , 空 list ( ...

  7. 10.Bash的安装

    10.Bash的安装本节提供了在 Bash支持的不同系统上的基本安装指导.本版本支持 GNU操作系统,几乎每个 UNIX版本,以及几个非 UNIX 系统,例如 BeOS 和 Interix.还有针对 ...

  8. url协议+域名+端口号

    string url = System.Web.HttpContext.Current.Request.Url.Scheme + "://" +                   ...

  9. join函数详解

    定义:join() 方法用于把数组中的所有元素放入一个字符串. 语法 : ArrayObject.join(separator)   separator 可选.指定要使用的分隔符.如果省略该参数,则使 ...

  10. unity 打包Error：WebException: The remote server returned an error: (403) Forbidden.

    記一下在ios上打包出錯: UnityEditor.BuildPlayerWindow+BuildMethodException: 2 errors at UnityEditor.BuildPlaye ...