Como sabemos en HTML a una etiqueta se le pueden asociar estilos (CSS) directamente en la propiedad style:
<p style="color: #f00; font-size: 20px">Mensaje rojo de tamaño 20px</p>
Con el framework Vue podemos enlazar nuestro modelo de datos con una o más propiedades en línea mediante la directiva v-bind.
Modificar el tamaño de la fuente y color de un párrafo en forma dinámica.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<p>Tamaño de la fuente:
<input type="range" v-model="tamañoFuente" min=10 max=100>{{tamañoFuente}}
</p>
<p>Color:
<input type="color" v-model="colorParrafo">
</p>
<p v-bind:style="{'font-size':tamañoFuente+'px', 'color': colorParrafo}">Párrafo de prueba</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data: {
tamañoFuente: 20,
colorParrafo: '#000'
}
})
</script>
</body>
</html>
Tamaño de la fuente: {{tamañoFuente}}
Color:
Párrafo de prueba
Primero veamos lo que ya conocemos, hemos definido dos controles input uno de tipo range y otro de tipo color. Además estos controles HTML los hemos asociado mediante la directiva v-model con nuestro modelos de datos:
<p>Tamaño de la fuente:
<input type="range" v-model="tamañoFuente" min=10 max=100>{{tamañoFuente}}
</p>
<p>Color:
<input type="color" v-model="colorParrafo">
</p>
En el modelo de datos tenemos las dos propiedades asociadas:
data: {
tamañoFuente: 20,
colorParrafo: '#000'
}
La sintaxis para actualizar las propiedades de la hoja de estilos en línea lo hacemos mediante la directiva v-bind:style
<p v-bind:style="{'font-size':tamañoFuente+'px', 'color': colorParrafo}">Párrafo de prueba</p>
Como vemos disponemos un objeto literal asociando cada una de las propiedades y el valor que extraemos del modelo de datos:
'font-size':tamañoFuente+'px', 'color': colorParrafo}
Las comillas simples en 'font-size' son obligatorias porque tenemos el caracter '-' que no es válido en Javascript cuando definimos variables.
Cada vez que hay un cambio en el modelo de alguna de las propiedades 'tamañoFuente' o 'colorParrafo' se actualiza la propiedad style del párrafo.
Podemos utilizar propiedades computadas cuando hacemos el enlace.
La etiqueta HTML puede tener perfectamente la propiedad style con valores que no cambian durante la ejecución del programa:
Párrafo de prueba