en mi proyecto Vue JS, quería mostrar datos de la API y funciona bien, mi único problema es cuando mostré {{flat.status}} a continuación en mi código, quería jugar con CSS, por ejemplo: if status==Available let el color del texto sea verde, y cuando el estado == Vendido, deje que el color del texto sea rojo, etc.
¿Hay una manera de hacerlo?
<b-th v-for="(flat, index) in Building.flats" :key="index" > <p> {{flat.status}} </p> </b-th>¡Sí! Puede hacer esto de varias maneras, pero la más simple es usar etiquetas de estilos condicionales. En el :style , ¡simplemente escriba el código!
<p :style=flat.status === 'available' ? 'color: green;' : 'color: 'red'>{{ flat.status }}</p>Si desea tener más control de CSS, simplemente use clases condicionales.
<p :class="flat.status === 'available' ? 'text-green' : 'text-red'>{{ flat.status }}</p> <style> .text-green { // CSS here } </style>Hay otros estilos de vinculación de clases que puede consultar para obtener más información. También le darán otras formas de hacer todo esto.
Para múltiples clases (ejemplo similar en el enlace que proporcioné):
<div :class="{ 'text-green': flat.available, 'text-red': flat.sold, 'text-yellow': flat.booked }">{{ flat.name }}</div>