Vue3 v-else-if-Direktive
Vue3 Eingebaute Direktivenv-else-ifDiese Direktive wird verwendet, um den else-if-Block von v-if darzustellen, und kann verkettet werden, um Mehrfachbedingungsprüfungen zu bilden.
Grundlegende Beschreibung
v-else-ifDie Direktive muss unmittelbar auf ein v-if- oder ein weiteres v-else-if-Element folgen und stellt eine weitere Bedingungsprüfung dar, wenn die vorherige Bedingung nicht erfüllt ist.
- Erwarteter Typ: any
- Funktion: Stellt den else-if-Block von v-if dar und muss ein v-if- oder v-else-if-Element vorausgehen. Kann verkettet werden.
Grundlegende Verwendung
Beispiel
<template>
<div>
<div v-if="type === 'A'">Typ A</div>
<div v-else-if="type === 'B'">Typ B</div>
<div v-else-if="type === 'C'">Typ C</div>
<div v-else>Andere Typen</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
<div>
<div v-if="type === 'A'">Typ A</div>
<div v-else-if="type === 'B'">Typ B</div>
<div v-else-if="type === 'C'">Typ C</div>
<div v-else>Andere Typen</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
Andere Erweiterungen