【vue, javascript】v-forで要素を繰り返し表示するための配列にHTMLタグを格納してスタイルを調整したい

Question

前提・実現したいこと

現在Vue, Nuxtのプロジェクト内でv-forを使用し、配列内の要素を繰り返し表示させようとしています。

ここから今困っている点なのですが、配列内にHTMLタグを格納してv-forで表示させるということは可能でしょうか。
v-forで出力させたテキストの一部分のスタイルを調整する必要があり、そのためには配列にHTMLタグをそのまま格納する必要があると考えています。

サンプルコードは以下の「該当のソースコード」に記述させていただきます。
下記コード内の以下の部分のスタイルを修正するためになにか方法はありますでしょうか。

  listContents.push(
    "ここの文字の一部を小さくしたいです" // 例えば「一部」という部分のfont-sizeを小さくしたいです。 
  );

配列内にタグを入れる方法以外にも、良い方法がありましたら教えていただけますと幸いです。
どうぞよろしくお願いします。

該当のソースコード

<template>
  <section>
    <ul class="list-wrapper">
      <li v-for="(list, index) in lists" :key="index">{{ list }}</li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    id: null,
    showText: null
  },
  computed: {
    lists() {
      const listContents = [];
      switch (this.id) {
        case 1:
          listContents.push("サンプル1");
          if (this.showText) {
　　　　　　 // ***** 該当箇所 *****
            listContents.push(
              "ここの文字の一部を小さくしたいです" // 例えば「一部」という部分のfont-sizeを小さくしたいです。 
            );
          }
          return listContents;
        case 2:
          listContents.push(
            "サンプル2"
          );
          return listContents;
        default:
          return [];
      }
    },
  },
  mounted() {
    // mounted内でresponseを受け取りdataに格納
    // 詳細省略
　　this.id = response.data.id; //例
  }
}
</script>

補足情報（FW/ツールのバージョンなど）

"nuxt": "^2.4.2"

Answer 1

インラインスタイルのバインディングを使用すれば
HTMLタグをそのまま格納する必要はないです。
https://jp.vuejs.org/v2/guide/class-and-style.html

そのためには配列にHTMLタグをそのまま格納する必要があると考えています。

Comments

[aa316316]

こんにちは！回答いただきありがとうございます！
サンプルとして乗せたコードのcomputed内のテキストの出し分けをしている条件分岐ですが、
実際にはもう少し分岐が多くそれに伴ってテキストの数も増えるため上記のような出し分けにしています。

コメントいただいた方法でやるとすると、HTML内にベタでテキストを書き、v-ifでのだし分けやクラスのバインディングを行うということでしょうか？

[yasutomi]

最初はそう思ったのですが
コードの可読性が低下するのでv-htmlで良いかと。

[aa316316]

なるほど、やはりHTMLタグのまま出力しようとするとv-htmlなどでバインディングし、条件分岐はv-ifで行うことになりそうですよね。
助かりました、ご回答いただきありがとうございます！