クラスとスタイルのバインディング — Vue.js

最終更新日: 2019年7月22日 データバインディングに一般に求められることの 1 つは、要素のクラスリストとインラインスタイルを操作することです。それらはどちらも属性ですから、v-bind を使って扱うことができます。最終的な文字列を式で計算するだけです。しかしながら、文字列の連結に手を出すのは煩わしく、エラーのもとです。そのため、Vue は v-bind が class と style と一緒に使われるとき、特別な拡張機能を提供します。文字列だけではなく、式はオブジェクトまたは配列を返すことができます。 HTML クラスのバインディング オブジェクト構文v-bind:class にオブジェクトを渡すことでクラスを動的に切り替えることができます: <div v-bind:class="{ active: isActive }"></div> 上記の構文は、active クラスの有無がデ

[syonx]

カスタムコンポーネント使用時に付与したclassは宣言側のルートコンポーネントのclassにマージされる ／ cf. https://github.com/vuejs/vue/issues/6144

[nilab]

「v-bind:class にオブジェクトを渡すことでクラスを動的に切り替える」

[Jwork]

“isActive: true,”

[okumuraa1]

ありがとうございますm(_ _)m

[tmyk_kym]

なるほど