v-bind: Vue.js の動的値のスタイル

Question

v-bind:style を使用して動的値を使用すると、v-bind:style が機能しないという問題が発生しましたが、v-bind:style は正しい値を取得していると確信しています (:style='{ color : red (その他の値) }') がコンソールとスタイルセクションの css に正常に反映されます。なぜ v-bind を使用しないのでしょうか?何か案は？ ?どうもありがとう。

リーリー ああああ

Answer 1

次のコード スニペットを確認してください。すべて問題ないようです:

リーリー リーリー

Answer 2

上で述べたように、スタイルには compulated 属性を使用する必要があります。
これにより、プロップへの変更も自動的に反映されます。
特定の条件がある場合は、コールバック関数で計算された値に基づいて値を変更することもできます。このアプローチを説明するために、ダーク モードの例を追加しました。

リーリー

次に、:style="style" を使用して div に追加します。

リーリー

私からのヒント。オブザーバーを使用する代わりに、色を設定するコードをアウトソースし、そのメソッドを色を変更するイベントにバインドします。これにより、アプリケーションがより柔軟になり、クリーンアップされます。しかし、あなたがやっていることも効果があります。