Vue의 소품을 기반으로 조건부로 렌더링된 텍스트를 표시하는 다른 방법은 무엇입니까?

Question

사용자 멤버십 상태에 따라 텍스트를 렌더링하는 구성 요소가 있는데 해당 속성 값에 따라 보간된 텍스트를 변경하고 싶습니다. v-if 或 v-show와 함께 여러 div/p 태그를 사용하는 것 외에 소품을 기반으로 다양한 텍스트를 표시하는 더 효율적인 방법이 있습니까?

수많은 텍스트와 함께 계속해서 쌓인 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>

Answer 1

예, 더 좋은 방법이 있습니다. 다음과 같은 계산된 속성을 정의할 수 있습니다. Vue2 구문

으아아아

Vue3 구문

으아아아

그런 다음 템플릿 내에서 보간 계산을 호출합니다. 예를 들어

으아아아

Answer 2

다음 코드 조각과 유사할 수 있습니다(계획을 매핑하고 계산된 속성을 사용).

으아아아 으아아아 으아아아