Vue之v-bind用法

<!-- 1. v-bind属性设定src -->

<img v-bind:src="imgUrl"> 

<!-- 2. 用v-bind的简写模式 -->

<img :src="imgUrl">

 

<!-- 3. v-bind来控制class，字符串:麻烦以及原始，不推荐 --> 

<div :class="divClassStr"></div>

<!-- 4. v-bind来控制class，字符串数组：可用的 -->

<div :class="divClassArray"></div>

<!-- 5. v-bind来控制class，JSON：可用的 -->

<div :class="{red: isRed, hasBorder: hasBorder}"></div>

 

<!-- 6. v-bind来控制style，字符串,不推荐 -->

<div class="red" :style="borderStyleStr"></div>

<!-- 7. v-bind来控制style，JSON，可用 -->

<div class="red" :style="{borderWidth: borderWidthStr,borderStyle: borderStyleStr, borderColor:  borderColorStr}"></div>