Comment appliquer dynamiquement une classe à l'aide de Vue

Apprenez à faire de Vue une sortie une classe ou une autre en fonction de certaines conditions

Dites que vous voulez appliquer le coursbackground-darkà un élément, si leisDarkprop est vrai, et sinon ajoutez lebackground-light.

Comment feriez-vous cela dans Vue?

Utilisation:class="[ isDark ? 'background-dark' : 'background-light' ]"

Voici un exemple:

<template>
  <div :class="[ isDark ? 'background-dark' : 'background-light' ]">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script> export default { props: { isDark: Boolean } } </script>

<!-- Add “scoped” attribute to limit CSS to this component only --> <style scoped> .background-dark { background-color: #000; } .background-light { background-color: #fff; } </style>

(merci beaucoup àAdam Wathanpour me l'avoir suggéré sur le Tailwind Slack)

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: