Vue Inline Style Bind
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
Lazy Louse
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><div v-bind:class="{ active: isActive }"></div>
<!-- bind an attribute -->
<img v-bind:src="imageSrc" />
<!-- dynamic attribute name -->
<button v-bind:[key]="value"></button>
<!-- shorthand -->
<img :src="imageSrc" />
<!-- shorthand dynamic attribute name -->
<button :[key]="value"></button>
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName" />
<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop binding. "prop" must be declared in the child component. -->
<MyComponent :prop="someThing" />
<!-- pass down parent props in common with a child component -->
<MyComponent v-bind="$props" />
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg><div v-bind:class="{ active: isActive }"></div>
The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.