Vue, comment utiliser un accessoire comme nom de classe

Parfois, vous passez un accessoire à un composant et vous souhaitez utiliser cette valeur d'accessoire comme nom de classe. Comment faire ça?

Supposons que vous ayez un composant de voiture.

Vous souhaitez ajouter une classe à sa sortie basée sur un accessoire.

Alors peut-être que l'accessoire s'appellecolor, et vous l'utilisez comme ceci dans d'autres parties de l'application:

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

Dans votre composant de voiture, vous devez d'abord déclarer le support de couleur:

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

alors vous pouvez l'utiliser dans la partie modèle:

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

Si vous souhaitez ajouter uncarclass, plus la classe déterminée par le prop de couleur, vous pouvez utiliser cette syntaxe:

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

Bon codage!

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: