Tutorial

How To Use Style and Class Bindings in Vue.js

Updated on September 28, 2020
authorauthor

Alligator.io and Natalia Vargas-Caba

How To Use Style and Class Bindings in Vue.js

Introduction

In this article, you will learn about dynamic style and class bindings in Vue.js. With the v-bind:style directive, you will visualize your font size on a click event. With v-bind:class, you will observe how to apply multiple classes to elements.

While this is possible with DOM manipulation, Vue.js allows you to dynamically render both styling and classes with concise lines of code and takes advantage of its data model structure.

Binding Styles Dynamically

Let’s develop a way in Vue.js to increase or decrease font size based on user input. To this end, Vue provides us with the v-bind:style directive.

Within your App.js file, instantiate a Vue instance and include your data model:

App.js
data() {
  return {
    fontSize: 10
  }
}

Create two buttons in your index.html file, and a paragrapth that takes in the v-bind:style directive:

index.html
<button v-on:click="fontSize++">
  Increase font size
</button>
<button v-on:click="fontSize--">
  Decrease font size
</button>

<p v-bind:style="{ fontSize: fontSize + 'px' }">
  Font size is: {{ fontSize }}
</p>

On each click event, the v-bind:style directive increments and decrements the value of your fontSize variable. This attaches the value of fontSize to the CSS font-size property.

If needed, add multiple style objects to the v-bind:style directive. In your App.js file, include the style objects as follows:

App.js
data() {
  return {
      baseStyles: {
      fontWeight:'800',
      color: 'red'
    },
      overrideStyles: {
      color:'blue'
    } 
  }
}

In your index.html file, provide an array of the style objects:

index.html
<p v-bind:style="[baseStyles, overrideStyles]">
  baseStyles and overrideStyles
</p>

Note: Take caution the order of your style objects in the array, as logic in following elements overrides previous ones.

Now that you’ve reviewed style bindings let’s consider dynamic classes in Vue.js.

Binding Classes Dynamically

Applying styles directly can get complex as the requirements change. To help with this, the v-bind:class directive provides a way to bind classes to content in an element.

For example, you may need to underline the element’s text and change the color and font-weight.

While this is possible to implement with a style binding, Vue.js allows you to include additional performance with the v-bind:class directive.

To achieve this, create an array of menuItems and a selected variable with a default value of 'Home' in your App.js file:

App.js
data() {
  return {
    selected: 'Home',
    menuItems: ['Home', 'About', 'Contact']
  }
}

In your index.html file, apply a v-for loop within an ordered list to iterate through the elements in the menuItems array.

With each click event, the v-bind:class directive assigns the value of the selected variable to the current element in menuItems. This permits you to pass several classes into your ordered list element, and adds any styling listed in CSS:

index.html
<ul>
  <li v-for="item in menuItems"
    v-on:click="selected = item"
    v-bind:class="{ selected: selected == item}">
      {{item}}
  </li>
</ul>

You can also pass multiple classes in an array using the v-bind:class directive.

Define an array of classes in your data model within the App.js file:

Apps.js
data() {
  return {
    classArray: ['selected', 'underlined']
  }
}

In your index.html file, refer to your classArray using the v-bind:class directive.

index.html
<p v-bind:class="[classArray]">
  Multiple classes {{ classArray }}
</p>

This will apply both the selected and the underlined classes to the element.

Conclusion

Using Vue.js style and class directives maintain dynamic actions within your elements and supports multiple instances for more powerful performance.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alligator.io

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

I love How cool is vue.js!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel