Vue3 スタイルバインディング

Vue.js class

class と style は HTML 要素の属性であり、要素のスタイルを設定するために使用します。v-bind を使ってスタイル属性を設定できます。

v-bind は class と style を処理するとき、式には文字列だけでなく、オブジェクトや配列を使用することもできます。

v-bind:class次のように省略できます:class。

class 属性バインディング

私たちはv-bind:classオブジェクトを設定して動的に切り替えますclass:

例 1

この例では isActive を true に設定すると緑色の div ブロックが表示され、false に設定すると表示されません：

<div :class="{ 'active': isActive }"></div>

試してみる »

上記の例の div class の描画結果は次のとおりです：

<div class="active"></div>

オブジェクトにさらに多くのプロパティを渡して、複数のクラスを動的に切り替えることもできます。

さらに、:classディレクティブは通常の class 属性と共存することもできます。

例 2

text-danger クラスの背景色が active クラスの背景色を上書きします：

<div class="static" :class="{ 'active' : isActive, 'text-danger' : hasError }"> </div>

試してみる »

上記の例の div class の描画結果は次のとおりです：

<div class="static text-danger"></div>

isActive または hasError が変化すると、class 属性値もそれに応じて更新されます。例えば、active の値が true の場合、class リストは "static active text-danger" になります。

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

例 3

text-danger クラスの背景色が active クラスの背景色を上書きします：

<div id="app"> <div class="static" :class="classObject"></div> </div>

試してみる »

例 3 と例 2 の描画結果は同じです。

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

例 4

data() { return { isActive: true, error: null } }, computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }

試してみる »

配列構文

私たちは配列を [v-bind:class] に渡すことができますv-bind:class、例は次のとおりです：

例 5

<div class="static" :class="[activeClass, errorClass]"></div>

試してみる »

上記の例の div class の描画結果は次のとおりです：

<div class="static active text-danger"></div>

三項演算子を使用してリスト内のクラスを切り替えることもできます：

例 6

errorClass は常に存在し、isActive が true のときに activeClass クラスが追加されます：

<div id="app"> <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div> </div>

試してみる »

上記の例の div class の描画結果は次のとおりです：

<div class="static text-danger"></div>

Vue.js style（インラインスタイル）

私たちはv-bind:style直接スタイルを設定でき、次のように省略できます:style：

例 7

<div id="app"> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">サンプル</div> </div>

試してみる »

上記の例の div style の描画結果は次のとおりです：

<div style="color: red; font-size: 30px;">サンプル</div>

スタイルオブジェクトに直接バインドすることもできます、テンプレートをより明確にします：

例 8

<div id="app"> <div :style="styleObject">サンプル</div> </div>

試してみる »

v-bind:style配列を使用して、複数のスタイルオブジェクトを1つの要素に適用できます：

例 9

<div id="app"> <div :style="[baseStyles, overridingStyles]">サンプル</div> </div>

試してみる »

注意：v-bind:style特定のプレフィックスを必要とする CSS プロパティ（transform など）を使用する場合、Vue.js は自動的に検出して対応するプレフィックスを追加します。

複数の値

style バインディングの property に複数の値を含む配列を提供できます。これは、複数のプレフィックス付きの値を提供するためによく使用されます。例：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

このように書くと、配列内でブラウザーにサポートされている最後の値のみが描画されます。この例では、ブラウザーがブラウザープレフィックスなしの flexbox をサポートしている場合、display: flex のみが描画されます。

コンポーネントでの class 属性の使用

単一のルート要素を持つカスタムコンポーネントで class 属性を使用すると、それらの class はその要素に追加されます。この要素の既存の class は上書きされません。

例 10

<div id="app"> <サンプル class="classC classD"></サンプル> </div> <script>// Vue アプリを作成 const app = Vue.createApp({}) // サンプル という名前の新しいグローバルコンポーネントを定義 app.component('サンプル', { template: '<h1 class="classA classB">I like サンプル!</h1>' }) app.mount('#app') </script>

試してみる »

上記の例の div class の描画結果は次のとおりです：

<h1 class="classA classB classC classD">I like サンプル!</h1>

データバインディング付きの class にも同様に適用されます：

<my-component :class="{ active: isActive }"></my-component>

isActive が true の場合、HTML は次のように描画されます：

<p class="active">Hi</p>

次を使用できます$attrsコンポーネント属性でこの操作を実行します：

例 11

<div id="app"> <サンプル class="classA"></サンプル> </div> <script> const app = Vue.createApp({}) app.component('サンプル', { template: ` <p :class="$attrs.class">I like サンプル!</p> <span>これは子コンポーネントです</span> ` }) app.mount('#app') </script>

試してみる »

注意：template 内の`はバッククォートであり、シングルクォートではありません'。

上記の例の div class の描画結果は次のとおりです：

<div id="app" data-v-app=""><p class="classA">I like サンプル!</p><span>这是一个子组件</span></div>

その他の拡張