• *Wellcome Guest This Forum is created to help each other. Join us in our journey.

    * Guest Earn Piont Every Post, like, comment,and etc.

Vue.js Change Style

S

Shehroz Azam

Guest
Vue.js is used to build User Interfaces (UIs) and Single-Page Applications (SPAs). It is easy to learn how to use Vue.js and the framework of freedom and comfort that is available while developing applications in this program because it has the best-combined features of Angular and ReactJS. That is why it is known for its easy-to-use and clean coding.

Vue.js provides style binding that you can use to change the style dynamically. You can bind a variable to the style attribute in any HTML tag and change the style when the bound variable is changed. In this article, we will have a look at how to use style binding and change the styling of variables using vue.js.

Inline Style Binding


In vue.js, we can bind variables to style attributes using v-bind directives.

Object Syntax


Just like with inline CSS styling, we can also do inline styling in Vue.js using v-bind directive and curly braces object syntax. You can bind any variable to the style attribute using the following script:

<p :style="{ color: colorVar, fontSize: fontSizeVar + 'px' }"></p>

And, in the script tag and data:

ata() {
return {
colorVar: 'red',
fontSize: 14
}
}


We can also take the object down to the data and bind that object with the style attribute to make our HTML look cleaner as follows:

data() {
return {
styleObject: {
colorVar: 'red',
fontSize: 14
}
}
}


Now, we will bind the “styleObject” variable to the style attribute as follows:

<p :style="styleObject"></p>
Array Syntax


Vue.js also provides the option to bind multiple variables in array syntax to the single HTML tag, as follows:

<p :style="[basicStyling, extraStyling]"></p>
Multiple Values


Similarly, we can also give multiple values using the array syntax to a CSS property within the inline binding, as follows:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

These are some of the different ways that we can use for binding variables with the style attribute to dynamically change the styling of a webpage.

Summary


This article covered the syntax for binding inline styling. You also learned about the object syntax and array syntax used to bind the values or variables to style attributes in vue.js. If this article proved helpful in giving you a better understanding of vue.js, feel free to continue reading at linuxhint.com for more useful content.

Credit to linux
 

Latest posts

Latest threads

Top