Другие способы отображения условного текста на основе реквизита в Vue?
У меня есть компонент, который отображает текст на основе статуса членства пользователей, и я хочу изменить интерполированный текст на основе этого значения реквизита. Есть ли более эффективный способ отображения другого текста на основе реквизита, кроме набора тегов div/p с v-if или 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Да, есть лучший подход. Вы можете определить вычисляемое свойство, например Синтаксис 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>
Опять же, для обработки стилей вы можете сделать что-то вроде :class = "getClass", где getClass будет вычисляемым свойством.
Может быть, что-то вроде следующего фрагмента (сопоставьте свои планы и используйте вычисляемое свойство):
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>Спасибо за ответ! Как бы вы тогда обработали переменную стилизацию таким образом? Привязка класса на основе planId или вычисляемой опоры?
@LovelyAndy, приятель, можешь привести пример? Вы имеете в виду стилизовать план в зависимости от planId? Кстати, я переписал свой ответ на Composition API
Да, допустим, у вас есть опция «нет плана», и вы хотите, чтобы ваша карточка или текст были фиолетовыми и, возможно, более крупным шрифтом и, возможно, даже другим родственным div с подтекстом, который снова имеет свой собственный стиль. В то время как другие могут быть одинаковыми по всем направлениям, просто с другим текстом-заполнителем. Просто еще один уровень сложности, с которым я не думал, что вычисляемые реквизиты действительно справятся.
Хорошо, вы можете использовать вычисление и просто сравнить handlePlan.plan Я обновил свой ответ, посмотрите, пожалуйста
Потрясающие! Спасибо за помощь. Интересно, вы думаете, что это лучше, чем иметь кучу условных операторов в вашем шаблоне? Кажется почти таким же подробным/много настроек, что и в разделе вашего скрипта. Просто любопытны ваши предпочтения здесь :)
Добро пожаловать. Я предпочитаю делать это в сценарии и оставлять шаблон как можно более чистым :)
Полностью понял! Спасибо за помощь в этом довольно простом вопросе
Спасибо за ответ! Вычисляемые свойства кажутся здесь отличной идеей, и мне, вероятно, следовало бы начать с этого, но как только в дело вступают стили переменных, я по какой-то причине отказался от идеи о них. Как бы вы поступили со стилем тогда? Используя привязку класса, например,
:class = "${planId === 'standard'? 'стиль-класс' : 'другой стиль' }`" ?