メソッドを使用して Vue.js に条件付きスタイルを追加するにはどうすればよいですか?

Question

親コンポーネントから渡されたプロパティ値に基づいて、子コンポーネントに条件付きスタイルを追加したいと考えています。

これは条件付きスタイルの実例です:

<li v-bind:class="[booleanValue ? 'stylingClassOne' : 'stylingClassTwo']"

ただし、これは、私のスタイルが単一の変数に基づいており、2 つの値 (true/false) のみを持つことができる場合にのみ機能します。

複数の値を取ることができる変数に基づいて条件付きスタイルを実装したいと考えています。親コンポーネントから子コンポーネント stylingDecider に文字列を渡すとします。値は stylingClassOne、stylingClassTwo、stylingClassThree になります。

したがって、次のことを実行したいと思います。 <li v-bind:class="getStylingClass(stylingDecider)"> しかし、これは 機能しません 。スタイルを決定するメソッドが必要な理由は、その処理に基づいてクラスを返す他の処理が進行中であるため、単に <li v-bind:class= を使用することはできないためです。 「スタイリング決定者」 。

私は何を間違えたのでしょうか?アドバイスをお願いします、ありがとうございます。 Vue 3 と bootstrap-vue 3 を使用しています。

Answer 1

機能するコード スニペットを作成しました:

リーリー リーリー リーリー