<!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. 用maven建立一个工程

    建立java工程 mvn archetype:generate -DgroupId=cn.maxhou.demo -DartifactId=myapp -DarchetypeArtifactId=ma ...

  2. iptables 命令

    NAME iptables — administration tool for IPv4 packet filtering and NAT SYNOPSIS iptables -ADC 指定链的规则 ...

  3. nginx 报错：[crit] 12456#0: *5 SSL_do_handshake() failed (SSL: error:1408A0A0:SSL routines:SSL3_GET_CLIENT_HELLO

    解决方法: 将配置 listen ssl; 更换为: listen ; ssl on; 从版本1.15.0开始,ssl on; 指令被废弃,使用 listen 443 ssl; 代替. 具体查看官网: ...

  4. 使用Minikube运行一个本地单节点Kubernetes集群

    使用Minikube是运行Kubernetes集群最简单.最快捷的途径,Minikube是一个构建单节点集群的工具,对于测试Kubernetes和本地开发应用都非常有用. ⒈安装Minikube Mi ...

  5. Spring4学习回顾之路08- FactoryBean配置Bean

    建立Student.java package com.lql.srping04; /** * @author: lql * @date: 2019.10.28 * Description: */ pu ...

  6. [HAOI2010]软件安装 题解

    题面 这道题比较显然地,是一道树形背包: 但是会有环,怎么办呢? 缩点!tarjan缩点! 然后在新图上跑树形背包就可以AC了 #include <bits/stdc++.h> #defi ...

  7. Docker结合Jenkins构建持续集成环境

    1.环境说明: jenkins+svn:192.168.71.142 测试环境:192.168.71.145 生产环境:192.168.71.148 操作系统:centos7. Maven3. Tom ...

  8. 安装consul-client+registrator

    安装registrator 下载镜像这里必须要注意:registrator的lastest版本已经2年没更新了,他的最新主板本是master,一定要注意,因为旧的版本无法发现跟自己不是同一个网络的容器 ...

  9. Scalar Queries CodeForces - 1167F (计数,树状数组)

    You are given an array $a_1,a_2,…,a_n$. All $a_i$ are pairwise distinct. Let's define function $f(l, ...

  10. webmagic学习之路-1：采集安居客列表页测试

    ---恢复内容开始--- package com.action; import java.util.ArrayList; import java.util.List; import java.util ...