Vue.jsは、毎日のクラスとスタイルのバインディングを学ぶ必要があります

データバインディングの一般的な要件は、操作要素のクラスリストとそのインラインスタイルです。それらはすべて属性であるため、V-Bindでそれらを処理できます。式の最終文字列を計算するだけです。ただし、文字列のスプライシングは面倒で間違いを犯すのが簡単です。したがって、V-Bindがクラスとスタイルに使用される場合、Vue.jsは特異的にそれを強化します。式の結果タイプは、文字列に加えてオブジェクトまたは配列にすることができます。

HTMLクラスをバインドします

口ひげタグを使用して、「{％raw％} class = "{{classname}}" {％endraw％}など）などのクラスにバインドできますが、この書き込み方法と `v-bind：class`をお勧めしません。選択できるのは2つのうちの1つだけです！

オブジェクト構文

オブジェクトをv-bind：classに渡すことができます。クラスを動的に切り替えます。 V-Bind：クラスディレクティブは、通常のクラス機能と共存できることに注意してください。

 <div v-bind：class = "{'class-a'：isa、 'class-b'：isb}"> </div> data：{isa：true、isb：false}

レンダリング：

<div> </div>

ISAとISBが変更されると、それに応じてクラスリストが更新されます。たとえば、ISBがtrueになった場合、クラスリストは「静的クラスAクラスB」になります。

データ内のオブジェクトを直接バインドすることもできます。

 <div v-bind：class = "classObject"> </div>データ：{classObject：{'class-a'：true、 'class-b'：false}}}

また、ここでオブジェクトを返す計算されたプロパティをバインドすることもできます。これは、一般的に使用された強力なモードです。

配列構文

Arrayをv-bindに渡すことができます。クラスにクラスリストを適用します。

 <div v-bind：class = "[classa、classb]"> data：{classa： 'class-a'、classb： 'class-b'}

レンダリング：

<div> </div>

条件に応じてリストのクラスを切り替えたい場合は、次の式を使用できます。

<div v-bind：class = "[classa、isb？classb： '']">

この例は常にClassaを追加しますが、ISBが真である場合にのみClassBが追加されます。

ただし、このように書くことは、複数の条件付きクラスがある場合は少し面倒です。 1.0.19+では、オブジェクト構文を配列構文で使用できます。

<div v-bind：class = "[classa、{classb：isb、classc：isc}]">

インラインスタイルをバインドします

オブジェクト構文

V -Bind：Styleのオブジェクトの構文は非常に直感的です - CSSに非常に似ているように見えますが、実際にはJavaScriptオブジェクトです。 CSS属性名は、CamelCaseまたは短い水平分離（Kebab-Case）によって名前が付けられます。

 <div v-bind：style = "{color：activecolor、fontsize：fontsize + 'px'}"> </div> data：{activeColor： 'red'、fontsize：30}

通常、スタイルオブジェクトに直接バインドする方が良いため、テンプレートをより明確にします。

 <div v-bind：style = "styleObject"> </div>データ：{styleObject：{color： 'red'、fontsize： '13px'}}}

同様に、オブジェクトの構文は、返されたオブジェクトの計算されたプロパティと組み合わせて使用されることがよくあります。

配列構文

V-Bind：Styleの配列構文は、複数のスタイルオブジェクトを1つの要素に適用できます。

<div v-bind：style = "[styleObjecta、styleObjectb]">

プレフィックスを自動的に追加します

V-Bind：Styleが変換などのベンダープレフィックスを必要とするCSS属性を使用する場合、Vue.jsは対応するプレフィックスを自動的に検出して追加します。

この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。

Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。

Vue Learningチュートリアルの詳細については、特別なトピック「Vue Practical Tutorial」をお読みください。

上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。