上两节我们学习了vue的实例知识：
第4节:vue实例的4个常用选项
第5节:vue 实例的生命周期

提醒一下，这两节的内容在后面实战的时候很重要，如果落下的同学可以回去翻看学习，不必害怕难学，这里没有难学的教程。

这一节，我们学习如何在html上绑定我们实例中的数据。
Mustache 语法
什么叫Mustache语法，别被这高大上的叫法吓到了，其实就是双大括号{{ }}的写法，在之前的章节我们就演示过在视图中显示我们的数据，这是最常见的绑定方式。有了它，我们可以轻松地在视图显示我们的数据并及时自动更新，无需手动控制。
  1. <div id="app">{{ name }}</div>
  2. <script>
  3.     let app = new Vue({
  4.     el:"#app",
  5.     data:{
  6.       name:"前端君"
  7.     }
  8.   });
  9. </script>
复制代码
十分简单，页面视图上也成功显示我们的data中的name的值：“前端君”。
绑定纯html
有时候有一种这样的需求，我们的数据包含了一些html的标签代码，比如： 

  1. name:"<strong>前端君</strong>"
复制代码

文本“前端君”被一个<strong>标签包住，而我们在展示的是，需要合理地渲染strong标签，再显示我们想要展示文本内容。这种情况，用原来的双大括号{{  }}方式，就不能满足了，它会渲染成这样：

<strong>被当作是普通的文本数据被展示了，这并不是我们想要的结果。这个是时候，你需要用vue提供的v-html指令，用法如下：
  1. <div id="app" v-html="name"></div>
  2. <script>
  3.   let app = new Vue({
  4.    el:"#app",
  5.    data:{
  6.     name:"<strong>前端君</strong>"
  7.    }
  8.   });
  9. </script>
复制代码
v-html以属性的形式添加到了div中，值为“name”，也就是我们数据data中的name：
  1. "<strong>前端君</strong>"
复制代码
我们来看看视图展示的结果：

视图上的“前端君”有了明显的加粗效果，说明<strong>标签发挥了作用，我们通过chrome的开发者工具查看解析生成后的html文档，name的值，被解析成html标签，并作为字节点，插入在 <div id=”app”></div>中去。
这，就是v-html的作用啦。
绑定属性
前面两个都是控制视图展示文本内容，有时候，html标签的属性也很重要，比如：<a>标签的href属性，<img/>标签的src属性等。Vue中如何将data中的数据绑定为这些属性的值呢？还是用双大括号 {{  }}的写法吗？

当然不是，这里不需要用双大括号 {{ }}，我们用v-bind指令，如下：
  1. <div id="app">
  2.    <!--在href前用v-bind：修饰-->
  3.    <a v-bind:href="link">hello官网</a>
  4. </div>
  5. <script>
  6.   let app = new Vue({
  7.   el:"#app",
  8.   data:{
  9.     link:"http://hello.com"
  10.   }
  11.   });
  12. </script>
复制代码
在视图中的a标签，我们在<a>标签加上v-bind:来修饰href属性，而它的值就是data中的属性link。我们来看看解析渲染的html页面效果。
标签<a>的属性href的值成功地绑定了data数据link的值，通过v-bind指令，就成功地将数据成功地绑定在视图的标签的属性中。

v-bind 指令的简写
对于v-bind指令，如果一个标签中需要绑定多个属性的话，就得连续写多个v-bind。
问题是没问题，但vue为了我们的代码更简洁易看，提供了v-bind指令的简写，仅需要冒号。
原本完整的写法：

  1. <!--完整的写法-->
  2. <a v-bind:href="link">hello官网</a>
复制代码

简洁的写法：
  1. <!--缩写-->
  2. <a :href="link">hello官网</a>
复制代码

此外，需要注意的是：当渲染的属性值是布尔值的时候（true和false），效果就不一样了，并不是简单地将true或者false渲染出来，而是当值为false的时候，属性会被移除。
我们试试看：
  1. <div id="app">
  2.     <!--我们用缩写的语法-->
  3.     <button :disabled="dis_true">
  4.         我是true
  5.     </button>
  6.     <button :disabled="dis_false">
  7.        我是false
  8.     </button>
  9. </div>
  10. <script>
  11.     let app = new Vue({
  12.     el:"#app",
  13.     data:{
  14.         dis_true:true,
  15.         dis_false:false
  16.      }
  17.    });
  18. </script>
复制代码
我们通过v-bind指令的缩写，给两个button标签的disabled属性绑定值，一个值为true，一个值为false，我们来看看效果：
我们看到，当属性值设置成true的时候，disabled的值为解析成“disabled”，当属性值设置成false的时候，属性disabled直接被移除掉了。
支持javascript表达式
上面讲到的都是将数据简单地绑定在视图上，但事实上，vue还支持我们对数据进行简单的运算：javascript表达式支持。
我们举3个例子演示一下：
1.加减乘除运算：
  1. <div id="app">{{ num+3 }}</div>
  2. <script>
  3.     let app = new Vue({
  4.         el:"#app",
  5.         data:{
  6.             num:2
  7.         }
  8.     });
  9. </script>
复制代码
上面的案例，在渲染的时候，并不是直接渲染data的num，而是对num进行的简单的加法：num+3，渲染的结果为：5。
2.三元运算符：
  1. <div id="app">{{ ok ? 'yes':'no' }}</div>
  2. <script>
  3.         let app = new Vue({
复制代码
三元运算符计算，上面元算的结果为：“yes”。
3.字符串拼接：
  1. <div id="app">
  2.         <a :href="'http://'+host">hello官网</a>
  3. </div>
  4. <script>
  5.         let app = new Vue({
  6.                 el:"#app",
复制代码
<a>标签的href属性的值通过两个字符串的拼接起来.
注意：
虽然vue支持javascript表达式运算，我们只会在运算比较简单的情况下才会这么玩，当运算比较繁琐复杂的时候，一定要用vue的computed属性来进行计算。
本节小结
在视图绑定数据的方法：Mustache语法（双大括号语法），绑定纯HTML，绑定属性，支持javascript表达式的写法，以及表达式写法和computed区别。
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue