スタイル クラスは VueJS の要素には適用されません

Question

したがって、testvalue が true の場合はクラス .testcolor を div に適用し、testvalue が false の場合は何も適用しないようにしたいと考えています。

getClass メソッドを :class に追加しても呼び出されませんが、{{ getClass }} から呼び出された場合には呼び出されます。 キャッシュをクリアしたり、コード全体を書き直してみたりしましたが、それでも動作しません。 完全なコードは次のとおりです:

リーリー

Vue インスタンスを div 要素にマウントし、:class="testClass" (回答から) を h2 に追加すると、機能することがわかりました。 しかし、h2要素にインストールすると機能しません。

Answer 1

コメント@martin0300

に基づいて編集しました

まず、パーティションを別のパーティションでラップする必要があります。そのパーティションの ID は test でなければなりません。 Vue はコンテナ要素 (ID test の div) をアプリケーションの一部とはみなさず、ディレクティブを処理しません。これについて言及した参考文献を以下に残しておきます。

https://vuejs.org/guide/essentials/application .html#アプリケーションのインストール

だから、マークアップを次のように変更して、getClass メソッドからの値を適用します...

リーリー

...または、計算されたプロパティ メソッドを使用する方法 (後述)

リーリー

--

＃＃＃オリジナルメッセージ： ＃＃＃

getClass

メソッドとして定義する場合に呼び出す必要があり、戻り値 ("testcolor") は :class の値に設定されます。関数呼び出し getClass() が getClass の代わりに使用されることに注意してください。 リーリー とはいえ、これは条件付きでクラスを適用する好ましい方法ではありません。私たちはメソッドよりも計算されたプロパティを好みます。メソッドはレンダリングのたびに呼び出されますが、計算プロパティは、依存する基になるリアクティブ データが変更された場合にのみ再計算されます (この場合、計算プロパティ

testClass

はリアクティブ プロパティ testvalue## に依存します) #. あなたの場合の慣用的な Vue コードは次のとおりです。計算プロパティは、アクセサー メソッドまたは JS プロキシ (:class="testClass"

および

NOT :class="testClass) を使用して内部で実装されるため、関数のようには呼び出されないことに注意してください。 ()")。メソッドと計算プロパティの使用方法の違いが混乱の原因だと思います。 リーリー