Vue 3-tutorial: classes en styles binden aan de state

class en style zijn twee bijzondere attributen: naast strings accepteert v-bind er ook objecten en arrays. Daarmee laat je de state van de applicatie in het uiterlijk doorwerken zonder het DOM met de hand aan te raken.

Gekleurde bolletjes

Laten we de woorden ‘Blauw’ en ‘Rood’ vervangen door bolletjes in de echte kleur. Sla eerst een hexadecimale code op in plaats van een naam:

<script setup>
const variants = ref([
  { id: 2234, color: '#2563eb', image: '/images/t-shirt-bleu.svg' },
  { id: 2235, color: '#dc2626', image: '/images/t-shirt-rouge.svg' }
])
</script>

Bind daarna de achtergrondkleur:

<div class="variants-wrapper">
  <div
    v-for="variant in variants"
    :key="variant.id"
    class="color-circle"
    :style="{ backgroundColor: variant.color }"
    @mouseover="updateImage(variant.image)"
  ></div>
</div>

Er verschijnen twee ronde bolletjes, een blauw en een rood, en de hover wisselt nog steeds de afbeelding.

Camel case of kebab case

Het object dat je aan :style geeft, is een JavaScript-object. De namen van de CSS-eigenschappen schrijf je er dus in camel case:

<div :style="{ backgroundColor: variant.color }"></div>

background-color zonder aanhalingstekens zou als een aftrekking worden gelezen. Kebab case blijft mogelijk, tussen aanhalingstekens:

<div :style="{ 'background-color': variant.color }"></div>

Beide vormen geven hetzelfde resultaat. Kies er één en houd je eraan.

De stijl uit de template halen

Zodra de eigenschappen zich opstapelen, wordt de template onleesbaar. Declareer het object in het script:

<script setup>
const styleTitre = ref({
  color: '#111827',
  fontSize: '28px',
  fontWeight: '700'
})
</script>

<template>
  <h1 :style="styleTitre">{{ product }}</h1>
</template>

Met een array combineer je meerdere objecten, waarbij de laatste het winnen van de eerste:

<div :style="[styleBase, styleSurcharge]"></div>

Een class binden

Nu de knop. Is het product uitverkocht, dan moet die tegelijk uitgeschakeld zijn en er uitgeschakeld uitzien.

Begin met het attribuut disabled, gebonden zoals in hoofdstuk 2:

<button class="button" :disabled="!inStock" @click="addToCart">
  Ajouter au panier
</button>

De knop reageert niet meer op een klik, maar niets laat dat zien. Voeg de grijze class toe, met dezelfde voorwaarde:

<button
  class="button"
  :class="{ disabledButton: !inStock }"
  :disabled="!inStock"
  @click="addToCart"
>
  Ajouter au panier
</button>

In het object dat je aan :class geeft, is de sleutel de naam van de class en de waarde de voorwaarde. Is !inStock waar, dan wordt de class disabledButton toegevoegd, anders wordt ze weggehaald.

class en :class bestaan naast elkaar

De knop draagt zowel class="button" als :class="{ … }". Vue laat ze niet met elkaar concurreren: het voegt ze samen.

<!-- écrit dans le gabarit -->
<button class="button" :class="{ disabledButton: true }">

<!-- rendu dans la page -->
<button class="button disabledButton">

Houd de vaste classes in class en de voorwaardelijke in :class.

Meerdere voorwaardelijke classes

Het object accepteert zoveel items als nodig:

<div :class="{ actif: estActif, 'en-erreur': aUneErreur, masque: !visible }"></div>

Een classnaam met een koppelteken moet tussen aanhalingstekens, om dezelfde reden als de kebab case bij de styles.

Kiezen tussen twee classes

Het object voegt een class toe of haalt ze weg. Wil je tussen twee classes wisselen, gebruik dan een ternaire operator in een array:

<div :class="[inStock ? 'enStock' : 'enRupture']"></div>

De array accepteert ook een mengeling van strings en objecten:

<div :class="['color-circle', { selectionne: index === selectedVariant }]"></div>

Waar je de CSS zet

Een single-file component kan zijn eigen stijl dragen, afgeschermd door het attribuut scoped:

<style scoped>
.color-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
</style>

Die classes kun je ook animeren: dat is het onderwerp van het hoofdstuk over transities.

Met scoped gelden die regels alleen voor de elementen van dit component: Vue zet een uniek attribuut op de tags en neemt dat op in de selector. Zo voorkom je dat een class .button uit het ene component een ander overschildert.