v-bind指令
除了内容需要动态绑定之外，我们元素的某些属性也需要动态的绑定，比如<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>而baseStyle,baseStyle1是需要在下面的数据区域创建的变量。
