bind (enlace) a estilos CSS en línea
Problema:
Modificar el tamaño de la fuente y color de un párrafo en forma dinámica.
pagina.html
funciones.js
estilos.css
Ejecución de la página
<!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>
No tiene disponible el navegador la capacidad de iframe