Breaking News: Grepper is joining You.com. Read the official announcement!

v-bind

Awesome answered on August 26, 2020 Popularity 10/10 Helpfulness 1/10

answer v-bind

related vue bind

v-bind

Comment

<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.

Popularity 10/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Aug 26 2020

Awesome

0 Answers Avg Quality 2/10

Closely Related Answers

vue bind

Comment

<!-- 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>

Popularity 10/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: bind

Link to this answer
Share Copy Link

Contributed on May 26 2022

Annoyed Albatross

0 Answers Avg Quality 2/10

v-bind

Contents

More Related Answers

v-bind

Closely Related Answers

vue bind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.