Home » VueJS Tutorial

Binding Styles in VueJS

Learn about the binding styles in VueJS.
Submitted by Venkatesan C, on March 09, 2022

Dynamically assigning inline styles is much similar to how you assign styles via classes. However, there are some interesting points to note there. Let's understand it by an example using a sample project.

Create a Vue project using the Vite build tool. Let's name it second-app (in fact this is the same project that's been created in the VueJS installation tutorial).

Here's the project structure:

Now delete everything inside the App.vue file and paste the below code. The below is simpler to understand the binding inline styles in the VueJs concept.

App.vue

<template>
  <h1 v-bind:style="{
    color: textColor,
    'font-size': size + 'px',
    backgroundColor: 'peachpuff'
  }">1. This is heading one</h1>
  <h1 v-bind:style="styledObjOne">2. This is heading two</h1>
  <h1 v-bind:style="[styledObjOne, styledObjTwo]">3. This is heading three</h1>
  <h1 v-bind:style="[isGood ? styledObjOne : styledObjTwo]">4. This is heading four</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      textColor: 'purple',
      size: 50,
      isGood: false,
      styledObjOne: {
        color: 'brown',
        fontSize: '50px',
        border: '2px solid black',
        padding: '10px'
      },
      styledObjTwo: {
        fontWeight: 'bolder',
        fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"
      }
    };
  },
};
</script>

In the above code, we have four different <h1> tags to demonstrate the different ways to bind inline styles to an element. Let's look at each of the <h1> tags one by one.

<h1 v-bind:style="{
    color: textColor,
    'font-size': size + 'px',
    backgroundColor: 'peachpuff'
  }">1. This is heading one</h1>

The first heading tag has a style attribute where color and font-size properties are bound to data named textColor and size in the data method.

Note:

The properties font-size and fontSize are the same. Since vue is not a JS file, Vue supports the CSS properties by either making the keys of the CSS properties as a kebab-case string or following a camel casing convention. Either way, the code works fine.

Declaring inline styles this way can be cumbersome when there are many properties that you want to bind to. Hence there is another way to bind inline styles. It is done by declaring all the properties in the data method itself as an object.

The second heading tag gets bound to a data property called styledObjOne, which is a style object.

<h1 v-bind:style="styledObjOne">2. This is heading two</h1>

The styledObjOne has the following CSS properties declared in it.

styledObjOne: {
	color: 'brown',
	fontSize: '50px',
	border: '2px solid black',
	padding: '10px'
}

Hence in this way, we can include inline styles in a more readable way and not make the code more cluttered.

We can also combine multiple styled objects using arrays as follows,

<h1 v-bind:style="[styledObjOne, styledObjTwo]">3. This is heading three</h1>

The third heading tag has two styled objects in an array assigned to the style attribute. By this way we can add more styled objects to the style attribute.

This is useful in cases where you want to have a set of modular styles that has to be combined to elements depending on the need.

We can also conditionally attach styles to the style attribute as follows,

<h1 v-bind:style="[isGood ? styledObjOne : styledObjTwo]">4. This is heading four</h1>

The fourth heading conditionally attaches a style based on the value of the data property isGood.

Let's look at the output,

Inspecting the elements will show the heading tags with inline styles attached to it as intended. You can view this by the following shortcut Ctrl + Shift + I.

---