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>
posted @ 2020-12-06 21:05  #Friday  阅读(495)  评论(0)    收藏  举报