J'ai un composant qui restitue le texte en fonction du statut d'adhésion de l'utilisateur et je souhaite modifier le texte interpolé en fonction de la valeur de cette propriété. Existe-t-il un moyen plus efficace d'afficher différents textes basés sur des accessoires autres que d'utiliser un tas de balises div/p avec v-if 或 v-show ?
Avoir constamment un tas de divs empilés avec seulement des tonnes de texte.
Toutes suggestions seraient grandement appréciées !
Bravo !
<script lang="ts" setup>
import { PropType } from 'vue'
const props = defineProps({
kind: {
type: String as PropType<'subscribed' | 'unsubscribed'>,
default: 'subscribed',
},
planId: {
type: String as PropType<'standard' | 'silver' | 'gold' | 'platinum' | 'diamond' | 'no plan'>,
default: 'standard',
},
})
</script>
<template>
<div class="c-promotion-plan-card" data-cy="component-promotion-plan-card">
<div class="flex items-baseline mb-sm">
<div v-if="planId === 'standard'" class="text-h6 text-dark">Standard Gang</div>
<div v-if="planId === 'silver'" class="text-h6 text-dark">Silver Foxes</div>
<div v-if="planId === 'gold'" class="text-h6 text-dark">Golden Girls</div>
<div v-if="planId === 'platinum'" class="text-h6 text-dark">Platinum Boys</div>
<div v-if="planId === 'diamond'" class="text-h6 text-dark">Diamond Dudes</div>
<div v-if="planId === 'no plan'" class="text-h6 text-dark">
No Plan Posse
</div>
</div>
</div>
</template> 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Oui, il existe une meilleure façon. Vous pouvez définir une propriété calculée comme Syntaxe Vue2
computed: { getLabel() { // Assuming that 'planId' is the dependency prop if(this.planId === 'standard') return 'Standard Gang'; else if(this.planId === 'silver') return 'Silver Foxes'; .... return 'No Plan Posse' // For 'no plan' condition }Syntaxe Vue3
setup(props) { // 1.getLabel depends on firstName,lastName. const getLabel = computed(() => { // Assuming that 'planId' is the dependency prop if(props.planId === 'standard') return 'Standard Gang'; else if(props.planId === 'silver') return 'Silver Foxes'; .... return 'No Plan Posse' // For 'no plan' condition }); return { getLabel, }; },Appelez ensuite le calcul d'interpolation dans le modèle, par exemple
Peut-être quelque chose comme l'extrait de code suivant (mapper votre plan et utiliser les propriétés calculées) :
const { ref, computed } = Vue const app = Vue.createApp({ props: { kind: { type: String, default: 'subscribed', }, planId: { type: String, default: 'standard', }, }, setup(props) { const plans = ref([{plan:'standard', name: 'Standard Gang'}, {plan:'silver', name: 'Silver Foxes'}, {plan:'gold', name: 'Golden Girls'}, {plan:'platinum', name: 'Platinum Boys'}, {plan:'diamond', name: 'Diamond Dudes'}, {plan: 'no plan', name: 'No Plan Posse'}]) const handlePlan = computed(() => plans.value.find(p => p.plan === props.planId)) return { plans, handlePlan } }, }) app.mount('#demo').style-class { color: red; font-size: 2em; } .other-style { color: blue; }