Vue, cómo usar un accesorio como nombre de clase.

A veces, le pasas una prop a un componente y quieres usar ese valor de prop como el nombre de la clase. ¿Como hacer eso?

Digamos que tiene un componente de automóvil.

Quieres agregar una clase a su salida basada en un prop.

Entonces tal vez el accesorio se llamecolor, y lo usa así en otras partes de la aplicación:

<Car color="red">
<Car color="blue">

En el componente de su automóvil, primero debe declarar el accesorio de color:

<script>
export default {
  name: 'Car',
  props: {
    color: String
  }
}
</script>

entonces puedes usarlo en la parte de la plantilla:

<template>
  <div :class="color"></div>
</template>

Si desea agregar uncarclass, más la clase determinada por el color prop, puede usar esta sintaxis:

<template>
  <div :class="['car', color]"></div>
</template>

¡Feliz codificación!

Descarga mi gratisManual de Vue


Más tutoriales de vue: