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