Vue.js style binding

Vue.js class

class and style are attributes of an HTML element that are used to set the style of the element. We can use v-bind to set the style attribute.

Vue.js v-bind has specifically enhanced it when dealing with classes and styles. The result type of an expression can be an object or an array in addition to a string.

class attribute binding

We can set an object for v-bind:class to dynamically switch class:

Instance 1

Set isActive to true in the instance to display a green div block, if set to false it does not display:

<div v-bind:class=" { active: isActive }"> </div>

The above example div class is:

<div class="active"></div> 

We can also pass in more properties in the object to dynamically switch between multiple classes.

Instance 2

The text-danger class background color overrides the background color of the active class:

<div class=" static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>

The above example div class is:

<div class="static active text-danger"></div> 

We can also directly bind an object in the data:

Instance 3

The text-danger class background color overrides the background color of the active class:

<div id=" app"> <div v-bind:class="classObject"></div> </div>

Instance 3 is the same as the result of instance 2.

In addition, we can also bind the computed properties of the returned object here. This is a common and powerful mode:

Instance 4

new Vue ({ el: '#app', data: { isActive: true, error: { value: true, type: 'fatal' } }, computed: { classObject: function () { return { base: true, active: this.isActive && !this.error.value, 'text-danger': this.error.value && this.error .type === 'fatal', } } } })

Array syntax

We can pass an array to v-bind:class with the following example:

Instance 5

<div v-bind:class=" [activeClass, errorClass]"> </div>

The above example div class is:

<div class="active text-danger"></div>

We can also use a ternary expression to switch the class in the list:

Instance 6

errorClass is always present, adding the activeClass class when isActive is true:

<div v-bind:class=" [errorClass ,isActive ? activeClass : '']"></div>

Vue.js style (inline style)

We can set the style directly in v-bind:style :

Instance 7

<div id=" app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" >Programming Tutorial</div > </div>

The above example div style is:

<div style="color : green; font-size: 30px;">Programming Tutorial</div>

You can also bind directly to a style object to make the template clearer:

Instance 8

<div id=" app"> <div v-bind:style="styleObject">Programming Tutorial</div> </div>

v-bind:style You can use an array to apply multiple style objects to an element:

Instance 9

<div id=" app"> <div v-bind:style="[baseStyles, overridingStyles]">Programming Tutorial</div> </div>

Note: When v-bind:style uses a CSS property that requires a specific prefix, such as transform , Vue.js will automatically detect and add the appropriate prefix.

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.