Cara alternatif untuk memaparkan teks yang diberikan secara bersyarat berdasarkan prop dalam Vue?

Question

Saya mempunyai komponen yang menghasilkan teks berdasarkan status keahlian pengguna dan saya ingin menukar teks yang diinterpolasi berdasarkan nilai sifat tersebut. Adakah terdapat cara yang lebih cekap untuk memaparkan teks berbeza berdasarkan prop selain menggunakan sekumpulan tag div/p dengan v-if 或 v-show ?

Sentiasa mempunyai sekumpulan div bertindan dengan hanya banyak teks.

Sebarang cadangan akan sangat dihargai!

Sekian!

<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>

Answer 1

Ya, ada cara yang lebih baik. Anda boleh menentukan sifat yang dikira seperti Sintaks 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
 }

Sintaks 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,
 };
},

Kemudian panggil pengiraan interpolasi dalam templat, contohnya

{{getLabel}}

Answer 2

Mungkin sesuatu seperti coretan kod berikut (petakan pelan anda dan gunakan sifat yang dikira):

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;
}

sssccc

  

    

      
{{ handlePlan.name }}