<template> <span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }"> <slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot> </span> </template> <script lang="ts"> import { computed, defineComponent } from 'vue'; import number from '@/filters/number'; export default defineComponent({ props: { value: { type: Number, required: true, }, }, setup(props) { const isPlus = computed(() => props.value > 0); const isMinus = computed(() => props.value < 0); const isZero = computed(() => props.value === 0); return { isPlus, isMinus, isZero, number, }; }, }); </script> <style lang="scss" scoped> .ceaaebcd { &.isPlus { color: var(--success); } &.isMinus { color: var(--error); } &.isZero { opacity: 0.5; } } </style>