← Other topics

Vue.js Simplified
Attribute Binding (#7)

Video Notes

In HTML, attributes allow us to provide configuration information to our elements.

<a href='https://wikipedia.org'>Wikipedia</a>

<img src='https://picsum.photos/id/465/200/300' alt='Random image'>

<div class='error'>Please correct the above errors</div>

 Copy

The above elements use a variety of attributes: href, src, alt, class.

In Vue.js we can dynamically set HTML attributes using the v-bind directive.

Example:

data() {
    return {
        imageSource: 'https://s3.amazonaws.com/codewithsusan/circle-correct@2x.png',
        imageAlt: 'Correct check mark'
    }
}

 Copy
<img v-bind:src='imageSource' v-bind:alt='imageAlt'>

 Copy

Vue provides the syntax shorthand : as a substitute for v-bind:

<img :src='imageSource' :alt='imageAlt'>

 Copy

Per the Vue style guide, it’s suggested that you are consistent with your usage of shorthands.

Bound attributes can include string concatenations:

<img v-bind:src="'https://s3.amazonaws.com/codewithsusan/circle-' + circleType + '@2x.png'">

 Copy

Note that binding is the appropriate way to set attributes; you can’t use text interpolation. The following would not work:

<img src='{{ imageSource }}' alt='{{ imageAlt }}'>

 Copy

Class and style binding

When it comes to attribute binding, there are some additional features available for binding to the class and style attributes. These features exist to give us flexibility when it comes to styling our dynamic interfaces (think: styling fields and messages on error/success, toggling modules and notifications, etc.).

Class binding with objects

You can set the class attribute to an object where the property is a class name and the value is a boolean value.

Example:

<div v-bind:class="{ error: hasError }">{{ feedback }}</div>

 Copy

In this case, if the value of hasError is true, the class error would be applied.

Multiple classes can be applied in this way by adding them to the object:

<div v-bind:class='{ error: hasError, critical: isCritical }'>{{ feedback }}</div>

 Copy

In the above example the classes error and critical would both be applied if hasError and isCritical were both true.

The v-bind:class directive can be used in combination with the regular HTML class attribute:

<div class='feedback' v-bind:class='{ error: hasError }'>{{ feedback }}</div>

 Copy

When the above is rendered, assuming hasError is true, the classes would be combined:

<div class='feedback error'>Please correct the errors above.</div>

 Copy

Class binding with arrays

In addition to objects, v-bind:class also accepts arrays:

data() {
    return {
        feedbackClass: 'feedback',
        errorClass: 'error'
    }
}

 Copy
<div v-bind:class='[feedbackClass, errorClass]'>{{ feedback }}</div>

 Copy

The above would render as:

<div class='feedback error'>Please correct the errors above.</div>

 Copy

The array technique can be combined with the object technique:

<div v-bind:class='[{ error: hasError }, feedbackClass]'></div>

 Copy

In plain English, we could interpret the above as:

Style binding with objects

In addition to dynamically binding class attributes, you can dynamically bind inline style attributes using objects:

data() {
    return {
        errorColor: 'red',
        errorLevel: 3,
        feedback: 'There was a problem...',
    }
}

 Copy
<div v-bind:style="{ color: errorColor, fontSize: errorLevel * 10 + 'px' }">{{ feedback }}</div>

 Copy

In the above example, the CSS property font-size was written using lower camel case, fontSize. If you prefer to use the CSS kebab-case style, just put the property in quotes font-size:

<div v-bind:style="{ color: errorColor, 'font-size': errorLevel * 10 + 'px' }">{{ feedback }}</div>

 Copy
← Other topics