検索

ホームページ  >  に質問  >  本文

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

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

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

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

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

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

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

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

P粉327903045P粉327903045316日前483

全員に返信(1)返信します

  • P粉653045807

    P粉6530458072024-03-22 18:24:16

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

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

    返事
    0
  • キャンセル返事