Vue.js Change Style

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.

from Linux Hint https://ift.tt/3705ao5