本系列博客汇总在这里：Vue.js 汇总
v-bind 指令
- 1、对象语法
- 2、数组语法
源码工程文件为：
一、使用说明
前面我们学习的指令主要作用是将值插入到我们模板的内容当中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
- 比如动态绑定 a 元素的 href 属性
- 比如动态绑定 img 元素的 src 属性
这个时候，我们可以使用指令：
v-bind
- 作用：动态绑定属性
- 缩写：：
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)
二、v-bind 的基本使用
v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值（这个学到组件时再介绍）。
在开发中，有哪些属性需要动态进行绑定呢？还是有很多的，比如图片的链接 src、网站的链接 href、动态绑定一些类、样式等等。
通过 Vue 实例中的 data 绑定元素的 src 和 href，如下：
v-bind 的语法糖
v-bind 有一个对应的语法糖，也就是简写方式，在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
简写方式如下：
三、v-bind 绑定 class
既然 v-bind 可以绑定一般的属性，是不是也是可以绑定 class 属性的呢？
1、对象语法
对象语法的含义是：class 后面跟的是一个对象。
用法一
直接通过 {} 绑定一个类
<h2 :class="{active: isActive}">{{message}}</h2>
用法二
也可以通过判断，传入多个值。
<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
现在我们加入想要实现点击来改变上述状态，结合之前学过的指令，我们是可以做到的，如下：
用法三
和普通的类同时存在，并不冲突。
<h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>
注：如果 isActive 和 isLine 都为 true，那么会有 title/active/line 三个类。
用法四
如果过于复杂，可以放在一个 methods 或者 computed 中。
<h2 v-bind:class="getClasses()">{{message}}</h2>
2、数组语法
数组语法的含义是：class 后面跟的是一个数组。
用法一
直接通过 [] 绑定一个类。
<h2 :class="['active']">{{message}}</h2>
用法二
也可以传入多个值。
<h2 :class="['active','line']">{{message}}</h2>
用法三
和普通的类同时存在，并不冲突。
<h2 class="title" :class="['active']">{{message}}</h2>
用法四
如果过于复杂，可以放在一个 methods 或者 computed 中。
<h2 class="title" :class="getClasses()">{{message}}</h2>
如有错误，欢迎指正！
