Vue.jsクラス
クラスとスタイルは HTML 要素の属性であり、要素のスタイルを設定するために使用されます。スタイル属性を設定するには v-bind を使用できます。
Vue.js の v-bind は、クラスとスタイルを処理する際に特別に強化されました。文字列に加えて、式の結果の型はオブジェクトまたは配列にすることもできます。
クラス属性のバインディング
1. オブジェクトをバインドしてクラスを動的に切り替える
v-bind:class のオブジェクトを設定してクラスを動的に切り替えることができます。
この例では、isActive:true が表示されている場合は緑色の div ブロックが表示され、isActive:false が表示されている場合は表示されません。
<div v-bind:class="{ 'active1': isActive }"></div>スタイル actvie1 を設定します。
---データ オブジェクトで isActive の値を true に設定します。
ページ表示結果： 
--- データ オブジェクトの isActive の値を false に設定すると、表示されなくなります。
2. 複数の動的クラスをバインドします。
text-danger クラスの背景色は、アクティブなクラスの背景色をオーバーライドします。
<div class="static" v-bind:class="{ 'active': isActive ,'text-danger' : hasError }"></div>ページの読み込み:
<div class="static active text-danger"></div>効果： 
active の緑色の背景は text-danger の赤色の背景で覆われているため、表示効果は赤色になります。
3. データ内の属性を直接バインドします。
コードを直接見てください。
<br>
// 动态绑定class属性classObject
<div class="static" v-bind:class="classObject"></div>
// 在data中控制active、text-danger的布尔值
export default {
name: "AaaTest1",
data(){
return{
isActive: true,
hasError: true,
classObject:[{
active:true,
'text-danger':true
}]
}
}
}
ページビューは例 2 と同じです。
ps: 返されたオブジェクトの計算されたプロパティをバインドします。
data: {
isActive: true,
error: {
value: false,
type: 'fatal'
}
},computed:{
classObject(){
return{
isActive: this.isActive && !this.error.value, // 二者皆为真时，才能绑定改class类；
'text-danger': this.error.value && this.error.type === 'fatal'
}
}
}
4. 配列構文、配列を v-bind:class に渡します。
例：<div v-bind:class="[activeClass, errorClass]"></div>
三項式を使用してリスト内のクラスを切り替えます。
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
ビュー: これは赤い四角です。この時点では、配列内の errorClass、isActive、および activeClass はすべてdata 内の属性です。
クラスが次のようにバインドされている場合:
<div class="static" v-bind:class="[errorClass ,isActive ? 'activeClass' : '']"></div>
ビュー: ピンクの四角形です。この時点では、activeClass は「引用符」で囲まれているため、activeClass はデータ属性ではなくクラス スタイルです。
Vue.js スタイル (インライン スタイル)
5. v-bind:style はスタイルを直接設定します。
<div class="static" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">:style样式</div>データ属性に設定:
ページ検査要素:
番組を見る:
6. スタイル オブジェクトに直接バインドします。
<div class="static" v-bind:style="styleObject">:style样式</div>データ属性に設定:
ページ検査要素: 例 5 と同じ。
ビュー表示: 例 5 と同じ。
7. 配列を使用して複数のスタイル オブジェクトを要素に適用します。
<div class="static1" v-bind:style="[baseStyles, overridingStyles]">数组形式添加内联样式。</div>データ属性に設定:
ページ検査要素:
番組を見る:
注: v-bind:style が、 transform などの特定のプレフィックスを必要とする CSS プロパティを使用する 場合 、Vue.js は対応するプレフィックスを自動的に検出して追加します。
概要: v-bind: クラスは 、オブジェクトをバインドし、複数のオブジェクトをバインドし、属性を直接バインドし、データ data 内のクラスのブール値を制御し、配列形式でバインドします (三項演算を実行できます)。
v-bind:style は、 オブジェクトの形式でラベルに直接設定され、オブジェクトをバインドし、配列内の複数の属性をバインドし、データ data にスタイルを設定します。