我有一个组件,根据用户成员身份状态呈现文本,我想根据该属性值更改插值文本.除了一堆v-ifv-show的divs/p标签外,还有没有更有效的方式根据props 显示不同的文本?

总是有一堆叠在一起的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>

推荐答案

可能类似于以下片段(映射您的计划并使用计算(computed)属性):

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>

Javascript相关问答推荐

不适用于 React 的 JSX 条件

如何将主 js 文件中的数组用于不同的 js 文件?

需要目录而不是 js 文件

如何在html中刷新选择列表

React 审核表单在提交时未提交审核

如何根据另一个输入的值进行输入?

'addEventListener' 和 'onclick' 仅适用于 'window' 元素,而不适用于任何其他元素(例如按钮)

构建自定义选项卡组件时无法在渲染函数中使用 TransitionGroup

为什么这个二维数组过滤不起作用?

有没有办法在Javascript中将只有hh:mm的字符串转换为日期

使用 useState 挂钩更新对象数组

无法访问存储在 vue.js 中本地存储 [object Object] 中的 json 对象

我在 js 中的数组开头未定义

有没有办法重新加载页面,然后立即打开一个模式?

在自定义钩子中创建一个数组是在每次状态更改时重新渲染值

为什么在循环外声明变量更快?

如何根据用户输入和下拉列表查找 html 文件

在服务器运行时运行命令?

如何在react 过渡组动画中正确居中旋转轴

React-Typescript:我没有找到为什么我的 getCurrentTime 函数不起作用的问题