v-bind instruction
除了内容需要动态绑定之外，我们元素的某些属性也需要动态的绑定，比如<img src=""/>或者<a href=""></a>里面的图片路径或者网址路径一定不是写死的，是需要随着请求来的数据而随之改变的。
这就会用到我们的v-bind指令了。
-- 正常的做法就是，使用v-bind指令-->
<img v-bind:src="imgURL">
<a v-bind:href = "webURL">webstrom快捷键</a>
语法糖的写法：直接一个“：”就代表了v-bind指令的简写形式。
<img :src="imgURL">
1）动态绑定class类
这样的话就可以通过控制类名里面的Boolean类型值来确定这个标签用的是那个class类来作为样式的表现形式。
（对象绑定语法）
<h2 :class="{类名:Boolean,类名:名:Boolean}">{
{
message}}</h2>
（数组绑定语法）
<!-- 当用【】来表示的话就是数组语法，然后数组语法的这种表现形式就是不灵活-->
<!-- 如果加上‘’的话就表示是字符串-->
<h2 :class="['active','line']">{
{
message}}</h2>
<!-- 去掉‘’的话就表示的是变量-->
<h2 :class="[active,line]">{
{
message}}</h2>
2）动态绑定样式
（对象绑定语法）
<!-- <h2 :style="{key(属性名):value(属性值)}">{
{
message}}</h2>-->
<!-- 值得注意的是如果属性的值没有写‘’的话系统会默认为是变量，然后就会去找这个变量，如果找不到的话就会报错-->
<!-- <h2 :style="{fontSize: 50px}">{
{
message}}</h2>-->
<h2 :style="{fontSize: '50px'}">{
{
message}}</h2>
（数组绑定语法）
<!-- 数组绑定的时候要注意的是【】里面要写的应该是一个一个变量的值而不是像对象里面那样的-->
<h2 :style="[baseStyle,baseStyle1]">{
{
message}}</h2>
And baseStyle, baseStyle1 are variables that need to be created in the data area below.