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 }">
neveropen
<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
HTML
<template> <div> <!--binding Inline styles for heading text ( using v-bind directive )--> <h1 v-bind:style="{ color: 'green' }"> neveropen </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 componentexport 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 ="[neveropen, textStyles]">
neveropen
</span>
CSS styles are encapsulated as Data objects in the Vue component.
data: {
neveropen: {
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
HTML
<template> <div> <!--binding Inline styles through Array of objects for heading text ( using v-bind directive )--> <h1 v-bind:style="[neveropen, textStyles]"> neveropen </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 neveropen: { color: "green" }, textColor: { color: "red" }, textStyles: { backgroundColor: "yellow", textAlign: "left", padding: "1rem", }, }; }, };</script> |
Output:
