En HTML sabemos que para activar una clase CSS debemos definirla en la propiedad class de la etiqueta:
<div class="principio columna2">Hola mundo</div>
Estamos indicando que la etiqueta 'div' tiene asociadas las clases 'principio' y 'columna2'.
Veamos como el framework Vue nos permite fácilmente añadir o eliminar clases a una etiqueta en forma reactiva dependiendo del estado del modelo.
Se tiene un arreglo que almacenan productos (codigo, descripcion, precio y stock) mostrar dichos datos en una tabla HTML. Las filas de la tabla que muestran artículos con stock en cero añadirles una clase que defina otro estilo.
<!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"> <style> .faltastock { background-color: yellow; color: blue; font-style: italic; } </style> </head> <body> <div id="aplicacion"> <table border="1"> <tr><td>Código</td><td>Descripción</td><td>Precio</td><td>Stock</td></tr> <template v-for="articulo in articulos"> <tr v-bind:class="{faltastock: articulo.stock===0}"> <td>{{articulo.codigo}}</td> <td>{{articulo.descripcion}}</td> <td>{{articulo.precio}}</td> <td>{{articulo.stock}}</td> </tr> </template> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var app=new Vue({ el: '#aplicacion', data:{ articulos: [{ codigo: 1, descripcion: 'papas', precio: 12.52, stock: 10 },{ codigo: 2, descripcion: 'naranjas', precio: 21, stock: 0 },{ codigo: 3, descripcion: 'peras', precio: 18.20, stock: 0 },{ codigo: 4, descripcion: 'duraznos', precio: 35, stock: 20 }] } }) </script> </body> </html>
Código | Descripción | Precio | Stock |
{{articulo.codigo}} | {{articulo.descripcion}} | {{articulo.precio}} | {{articulo.stock}} |
Declaramos la clase "faltastock" que luego se la agregaremos en forma dinámica a cada fila de la tabla que lo requiera:
<style> .faltastock { background-color: yellow; color: blue; font-style: italic; } </style>
Para añadir una clase a una etiqueta HTML debemos definir la directiva v-bind:class:
<tr v-bind:class="{faltastock: articulo.stock===0}">
Como vemos hay un objeto literal cuya propiedad es el nombre de la clase a agregar:
faltastock: articulo.stock===0
Luego del nombre de la clase disponemos una condición que se puede valuar verdadera o falsa. En caso de valuarse verdadera la clase 'faltastock' se agrega a la etiqueta.