Vue.js Simplified - Attribute Binding (#7)

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>

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'
    }
}

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

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

Bound attributes can include string concatenations:

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

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 }}'>

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>

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>

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>

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

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

Class binding with arrays

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

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

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

The above would render as:

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

The array technique can be combined with the object technique:

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

In plain English, we could interpret the above as:

• If hasError is true, apply the class error
• Always apply the feedbackClass

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...',
    }
}

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

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>