详解VUE中v-bind的基本用法

前端之家收集整理的这篇文章主要介绍了详解VUE中v-bind的基本用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这两天学习了v-bind的基本用法,所以,今天添加一点小笔记。

1. v-bind:class(根据需求进行选择)

1.1

.Box{ background-color: #ff0; } .textColor{ color: #000; } .textSize{ font-size: 30px; }

<div id="app">
<span class="Box" :class="{'textColor':isColor,'textSize':isSize}">我是字

1.2

.Box{ background-color: #ff0; } .textColor{ color: #000; } .textSize{ font-size: 30px; }
Box" :class="classObject">我是字

1.3

.Box{ background-color: #ff0; } .textColor{ color: #0f0; } .textSize{ font-size: 30px; }
Box" :class="[classA,classB]">我是字

1.4

.Box{ background-color: #ff0; } .textColor{ color: #0f0; } .textSize{ font-size: 30px; }
Box" :class="[isA?classA:'',classB: 'textSize',isA: false } })

2.v-bind:style (根据需求进行选择,驼峰式)

2.1

Box" :style="{color:activeColor,fontSize:size,textShadow:shadow}">我是字

2.2

Box" :style="styleObject">我是字

2.3

Box" :style="[styleA,styleB]">我是字

2.4

Box" :style="[isA?styleA:'',styleB:{ textShadow: '5px 2px 6px #000' },isA: false } })

3.v-bind:src

4.v-bind:title

猜你在找的Vue相关文章