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.