在Vue中顯示基于道具的條件文本的其他方式？

我有一個組件可以根據用戶成員身份呈現文本，我想根據該道具值更改插值文本。v-if除了帶有or的一堆 divs/p 標簽之外，還有一種更有效的方法來顯示基于 prop 的不同文本v-show嗎？

不斷有一堆堆疊的 div 只是大量的文本。

任何意見，將不勝感激！

干杯!

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

uj5u.com熱心網友回復：

可能類似于以下片段（映射您的計劃并使用計算屬性）：

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

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="c-promotion-plan-card" data-cy="component-promotion-plan-card">
    <div class="flex items-baseline mb-sm">
      <div class="text-h6 text-dark" :class="handlePlan.plan === 'standard' ? 'style-class' : 'other-style'">{{ handlePlan.name }}</div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

是的，有更好的方法。您可以定義一個計算屬性，如 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
 }

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

然后在模板內的插值中呼叫它，例如

<div class="text-h6 text-dark">{{getLabel}}</div>

標籤：javascript Vue.js Vuejs3 Vue 道具

上一篇：Nuxt3的連接檢查器($nuxt.isOffline)

下一篇：Nuxt2.15.7的構建錯誤-無法決議CSS@font-faceURL