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

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!

Más tutoriales de vue:

• Una descripción general de Vue.js
• La CLI de Vue.js: aprenda a usarla
• DevTools de Vue.js
• Configuración de VS Code para el desarrollo de Vue
• Crea tu primera aplicación con Vue.js
• Componentes de un solo archivo de Vue.js
• Plantillas e interpolaciones de vue.js
• Directivas de Vue.js
• Métodos de Vue.js
• Propiedades calculadas de Vue.js
• Diseñar componentes de Vue.js usando CSS
• Vigilantes de Vue.js
• Métodos Vue vs observadores vs propiedades calculadas
• Filtros de Vue.js
• Componentes de Vue.js
• Tragamonedas Vue.js
• Accesorios de componentes de Vue.js
• Eventos de Vue.js
• Comunicación de componentes de Vue.js
• Vuex, el administrador de estado de Vue.js
• Vue, usa un componente dentro de otro componente
• Vue, cómo usar un accesorio como nombre de clase.
• Cómo usar SCSS con componentes de archivo único Vue.js
• Usando Tailwind con Vue.js
• El enrutador Vue
• Mostrar dinámicamente un componente de Vue
• La hoja de trucos de Vue.js
• Almacene datos de Vue en localStorage usando Vuex
• Cómo aplicar dinámicamente una clase usando Vue
• Vue, cómo usar v-model
• Vue, por qué los datos deben ser una función
• Roadmap to become a Vue.js developer in 2020