Css Vue3 组合 api 中的对象值样式

• 我有3个复选框和一个信息框如果没有选中任何复选框我想显示默认消息如果选中其中一个复选框我想显示与该复选框相关的消息如果再次选中多个复选框我想显示默认消息.

• 我有Params对象，它包含我的infoTypes数组，该数组包含选定复选框的值.我试着像下面这样编写代码，但做不到我想做的事情.

• 我要做的是将CSS应用于我的infoBodyOptions对象值.例如，我想要在文本中使用‘This is a Description Message Body’，或者我只想在该文本中使用粗体显示‘Description’

<template>
  <div class="content-quality__wrapper-info">
    <SomeRandomComponent1 />
    <SomeRandomComponent2 />
    <div class="content-quality__info">
      <h1 class="content-quality__info--title">{{infoTitleOptions[selected]}}</h1>
      <p class="content-quality__info--text">{{infoBodyOptions[selected]}}</p>
    </div>
  </div>
</template>

<script setup>
import SomeRandomComponent1 from "../components/SomeRandomComponent1.vue";
import SomeRandomComponent2 from "../components/SomeRandomComponent2.vue";
import { useListContext } from "../composables/useListContext.js";
import { computed } from "vue";

const { params } = useListContext();

const selected = computed(() => {
  if (params.value.infoTypes.length === 1) {
    return params.value.infoTypes[0];
  } else {
    return "DEFAULT";
  }
})

const infoTitleOptions = {
  DEFAULT: 'This is a Default Message Title',
  VIDEO: 'This is a VIDEO Message Title',
  IMAGE: 'This is a IMAGE Message Title',
  DESCRIPTION: 'This is a DESCRIPTION Message Title',
}

const infoBodyOptions = {
  DEFAULT: 'This is a Default Message Body',
  VIDEO: 'This is a VIDEO Message Body',
  IMAGE: 'This is a IMAGE Message Body',
  DESCRIPTION: 'This is a DESCRIPTION Message Body',
}
</script>

<style lang="scss" scoped>
.content-quality {
  &__wrapper-info {
    background: #fff;
    border-radius: 0.375rem;
    display: flex;
  }
  &__info {
    background: #f7f7fa;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin: 1.5rem;
    &--title {
        font-size: 1rem;
        font-weight: 600;
        color: #273142;
    }
    &--text {
        font-size: 0.875rem;
        font-weight: 400;
        color: #273142;
        margin-top: 0.25rem;
    }
  }
}
</style>

const infoBodyOptions = {
  DEFAULT: 'This is a Default Message Body',
  VIDEO: 'This is a VIDEO Message Body',
  IMAGE: '<span>This is a IMAGE Message Body</span>',
  DESCRIPTION: 'This is a <strong>DESCRIPTION</strong> Message Body',
}

我试了几个标签，但不起作用