我有一個組件可以根據用戶成員身份呈現文本，我想根據該道具值更改插值文本。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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475551.html
標籤：javascript Vue.js Vuejs3 Vue 道具