1。序文
データバインディングの一般的な要件は、操作要素のクラスリストとそのインラインスタイルであることを誰もが知っていると思います。それらはすべてプロパティであるため、 v-bindでそれらを処理できます。式の最終文字列を計算するだけです。ただし、文字列のスプライシングは面倒で間違いを犯すのが簡単です。したがって、 v-bindクラスとスタイルに使用される場合、Vue.jsは特別にそれを強化します。式の結果タイプは、文字列に加えてオブジェクトまたは配列にすることができます。
2。HTMLクラスをバインドします
注： class="{{ className }}"など、classにバインドするために口ひげタグを使用できますが、この書き込み方法とv-bind:classお勧めしません。選択できるのは2つのうちの1つだけです！
オブジェクト構文
オブジェクトをv-bind:classに渡すことができます。クラスを動的に切り替えます。 v-bind:classディレクティブは、通常のクラス機能と共存できることに注意してください。
<div v-bind：class = "{'class-a'：isa、 'class-b'：isb}"> </div>データ：{isa：true、isb：false}レンダリング：
<div> </div>
ISAとISBが変更されると、それに応じてクラスリストが更新されます。たとえば、ISBがtrueになった場合、クラスリストは「 static class-a class-b 」になります。
データ内のオブジェクトを直接バインドすることもできます。
<div v-bind：class = "classObject"> </div>
データ：{classObject：{'class-a'：true、 'class-b'：false}}また、ここでオブジェクトを返す計算されたプロパティをバインドすることもできます。これは、一般的に使用された強力なモードです。
配列構文
Arrayをv-bind:classクラスリストを適用します。
<div v-bind：class = "[classa、classb]">
データ：{classa： 'class-a'、classb： 'class-b'}レンダリング：
<div> </div>
条件に応じてリストのクラスを切り替えたい場合は、次の式を使用できます。
<div v-bind：class = "[classa、isb？classb： '']">
この例は常にClassaを追加しますが、ISBが真である場合にのみClassBが追加されます。
2。インラインスタイルをバインドします
オブジェクト構文
v-bind:styleのオブジェクトの構文は非常に直感的です - CSSに非常に似ているように見えますが、実際にはJavaScriptオブジェクトです。 CSS属性名は、CamelCaseまたは短い水平分離（Kebab-Case）によって名前が付けられます。
<div v-bind：style = "{color：activecolor、fontsize：fontsize + 'px'}"> </div>データ：{ActiveColor： 'Red'、fontsize：30}通常、スタイルオブジェクトに直接バインドする方が良いため、テンプレートをより明確にします。
<div v-bind：style = "styleObject"> </div>
データ：{styleObject：{color： 'red'、fontsize： '13px'}}同様に、オブジェクトの構文は、返されたオブジェクトの計算されたプロパティと組み合わせて使用されることがよくあります。
3。配列構文
v-bind:styleのアレイ構文は、複数のスタイルオブジェクトを1つの要素に適用できます。
<div v-bind：style = "[styleObjecta、styleObjectb]">
プレフィックスを自動的に追加します
v-bind:style変換などのベンダープレフィックスを必要とするCSS属性を使用する場合、Vue.jsは対応するプレフィックスを自動的に検出して追加します。
4。概要
上記は、Vue.jsバインディングクラスとスタイルスタイルのコンテンツ全体がコンパイルされています。この記事は詳細に紹介されており、特定の参照学習値があります。 vue.jsを学ぶことは誰にとっても役立つことを願っています。編集者は、Vue.jsに関する情報を次々に更新します。興味のある友達は、wulin.comに引き続き注意を払います。