Vue.JS Cambio de estilo

Vue.JS se utiliza para construir interfaces de usuario (UI) y aplicaciones de una sola página (SPA). Es fácil aprender a usar Vue.JS y el marco de libertad y comodidad que está disponible mientras se desarrolla aplicaciones en este programa porque tiene las características mejor combinadas de Angular y ReactJS. Por eso es conocido por su codificación fácil de usar y limpia.

Vue.JS proporciona un enlace de estilo que puede usar para cambiar el estilo dinámicamente. Puede unir una variable al atributo de estilo en cualquier etiqueta HTML y cambiar el estilo cuando se cambia la variable unida. En este artículo, veremos cómo usar el enlace de estilo y cambiar el estilo de las variables usando Vue.js.

Enlace de estilo en línea

En vue.JS, podemos unir variables a los atributos de estilo utilizando directivas de enlace V.

Sintaxis de objetos

Al igual que con el estilo CSS en línea, también podemos hacer un estilo en línea en Vue.JS utilizando la directiva de unión a V y la sintaxis del objeto rizado. Puede unir cualquier variable al atributo de estilo utilizando el siguiente script:

Y, en la etiqueta y los datos de script:

También podemos llevar el objeto a los datos y vincular ese objeto con el atributo de estilo para que nuestro HTML se vea más limpio de la siguiente manera:

Ahora, uniremos la variable "styleObject" al atributo de estilo de la siguiente manera:

Sintaxis de la matriz

Vue.JS también proporciona la opción de unir múltiples variables en la sintaxis de matriz a la etiqueta HTML única, de la siguiente manera:

Valores múltiples

Del mismo modo, también podemos dar múltiples valores utilizando la sintaxis de la matriz a una propiedad CSS dentro de la unión en línea, de la siguiente manera:

Estas son algunas de las diferentes formas en que podemos usar para las variables vinculantes con el atributo de estilo para cambiar dinámicamente el estilo de una página web.

Resumen

Este artículo cubrió la sintaxis para un estilamiento en línea de unión. También aprendió sobre la sintaxis del objeto y la sintaxis de la matriz utilizada para unir los valores o variables a los atributos de estilo en Vue.js. Si este artículo resultó ser útil para darle una mejor comprensión de Vue.JS, siéntete libre de seguir leyendo en Linuxhint.com para contenido más útil.