[Vuejs]-Inline CSS styling behavior in VueJs

by

0👍

That is because computed properties are cached based on their reactive dependencies

Reference: Computed Property and Caching

0👍

In Paragraph 1, you are binding a string value to the style attribute.

In Paragraph 2, you are binding an object value to the style attribute.

For string values, the browser will parse the style attribute and immediately update the rendering. If an invalid property or invalid property-value is added, CSS will ignore it.

For object values, Vue will dynamically update the style properties using the object key-value pairs. If an invalid value is encountered, it will ignore the property and avoid updating it through JavaScript. This is why the background color stays blue.

Vue handles style objects using JavaScript, for example:

document.querySelector("p").style.backgroundColor = "blue";
document.querySelector("p").style.backgroundColor = "blu"; // this will be ignored, it will not 'reset' the value to a blank state

Leave a comment