How to binding inline styles in Vue.js ?

Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Every Web application needs HTML CSS styles for presenting a better User Interface. Vue.js allows you to dynamically render styling with data model structure. Usually, we can bind the styles using <style> tag with HTML attributes. Vue.js has many in-built directives. In Vue.js, we can use v-bind: style directive for binding Inline styles. The v-bind directive is used for binding styles and adding class attributes. Here, the :style is used as short-hand for v-bind:style. In this article, we will see how to Binding Inline Styles in Vue.js. In Vue.js, use camel case for each CSS attributes in v-bind:style. For instance, the format represents the basic implementation:

{ backgroundColor: 'yellow', textAlign: 'left', fontWeight: "bold" }

There are two ways for binding the Inline Styles in Vue.js:

• Binding to Objects
• Binding to Arrays

We will explore the above approaches & will understand them sequentially.

Binding to Objects: The object is needed to pass to the :style directive, which is the shorthand for the v-bind:style, which enables dynamic styles. It helps to supports binding to JavaScript object values.

Approach 1: In this approach, We will bind the styles with HTML elements directly, it's known as Inline styles.

Syntax:

<span v-bind:style = "{ color: textColor, fontSize: 2px }">
    GeeksforGeeks
<span>

Example 1: In this example, we are adding styles directly inside the HTML elements. Now, create a two-way data flow binding text using the v-model directive in the input box and binding inline styles dynamically for input text appearing in DOM. If you need to increase the font size of sample text use the + button and use the - button to decrease it. Inline event handlers are used for buttons to increase and decrease the text size.

• App.vue

<template>
  <div>
    <!--binding Inline styles for 
        heading text ( using v-bind directive )-->
    <h1 v-bind:style="{ color: 'green' }">
      GeeksforGeeks
    </h1>
    <h3 v-bind:style="{ backgroundColor: 'yellow',
                        color: 'red',
                        textAlign: 'left',
                        padding: '1rem',}">
      Binding Inline styles in Vue.js
    </h3>
    <button v-on:click="sizeOfFont++">
      +
    </button>
    <input v-model="sampleText" 
           placeholder="Type Text Here" />
    <button v-on:click="sizeOfFont--">
      -
    </button>
    
    <!--binding styles dynamically for sample
         text( using v-bind directive )-->
    <h4 v-bind:style="{ color: 'green', 
                          fontSize: sizeOfFont + 'px' }">
      {{ sampleText }}
    </h4>
  </div>
</template>

<script>
  
// Creating a vue component
export default {
  name: "App",
  data() {
    return {
      sampleText: "",
      sizeOfFont: 20,
    };
  },
};
</script>

Output:

Binding to Arrays: The :style directive can be bound to an array of multiple style objects. 

Approach 2: In this approach, We will use the v-bind directive to add Inline styles through an array of objects with Vue components. An array of objects helps to add multiple style objects for HTML elements. we will add an extra object in the array syntax, it helps to bind more styles for each HTML element.

Syntax: Add multiple objects as values in the :style directive:

<span v-bind:style ="[geeks, textStyles]">
    GeeksforGeeks
</span>

CSS styles are encapsulated as Data objects in the Vue component.

data: { 
geeks: {
           color: "green",
           fontSize: "30px", 
           fontWeight: "bold"
       },
textStyles: {
             backgroundColor: 'yellow',
           textAlign: 'left', 
             padding: '1rem'
 }
}

Example 2: In the below example, we are adding Inline styles through an array of objects initialized by the Vue Component. Here, we are creating multiple objects for styles, binding two or more objects inside the array [ ] for v-bind:style directive.

• App.vue

<template>
    <div>
        <!--binding Inline styles through Array of 
            objects for heading text ( using v-bind directive )-->
        <h1 v-bind:style="[geeks, textStyles]">
            GeeksforGeeks
        </h1>
        <h3 v-bind:style="[textColor, textStyles]">
            Binding Inline styles through array of objects
        </h3>
    </div>
</template>

<script>

    // Creating a vue component
    export default {
        name: "App",
        data() {
            return {
                
                //multiple objects for styles
                geeks: { color: "green" },
                textColor: { color: "red" },
                textStyles: {
                    backgroundColor: "yellow",
                    textAlign: "left",
                    padding: "1rem",
                },
            };
        },
    };
</script>

Output:

chauvelinmariedelcasse

Follow

Improve

Article Tags :

• Technical Scripter
• JavaScript
• Web Technologies
• Technical Scripter 2022
• Vue.JS

+1 More