vue.js 入門チュートリアル バインディング クラスとスタイル スタイル

1. はじめに

データ バインディングの一般的な要件は、要素のクラス リストとそのインライン スタイルを操作することであることは誰もが知っていると思います。これらはすべてプロパティであるため、v-bind を使用してそれらを処理できます。式の最後の文字列を評価するだけで済みます。ただし、文字列の連結は面倒でエラーが発生しやすくなります。したがって、Vue.js は、クラスとスタイルに使用される場合に v-bind を特に強化します。文字列に加えて、式の結果の型はオブジェクトまたは配列にすることもできます。

2. HTML クラスのバインド

注意: class="{{ className }}" などのクラスをバインドするために Mustache タグを使用することはできますが、この記述方法を v-bind:class と組み合わせることはお勧めしません。 2 つのうち 1 つしか選択できません。

オブジェクト構文

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

<div class="static" v-bind:class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB }"></div>

data: {
 isA: true,
 isB: false
}

は次のようにレンダリングされます:

<div class="static class-a"></div>

isA と isB が変更されると、それに応じてクラス リストが更新されます。たとえば、isBがtrueになると、クラスリストは「static class-a class-b」になります。

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

<div v-bind:class="classObject"></div>

data: {
 classObject: {
 'class-a': true,
 'class-b': false
 }
}

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

配列構文

配列を v-bind:class に渡してクラス リストを適用できます:

<div v-bind:class="[classA, classB]">

data: {
 classA: 'class-a',
 classB: 'class-b'
}

次のようにレンダリングされます:

<div class="class-a class-b"></div>

条件クラスに基づいてリストを切り替えたい場合もでは、次の三項式を使用できます:

<div v-bind:class="[classA, isB ? classB : &#39;&#39;]">

この例では、常に classA が追加されますが、isB が true の場合にのみ classB が追加されます。

2. インライン スタイルのバインド

オブジェクト構文

v-bind:style のオブジェクト構文は非常に直感的です。見た目は CSS に非常に似ていますが、実際には JavaScript オブジェクトです。 CSS プロパティ名は、キャメルケースまたはケバブケースにすることができます:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>

data: {
 activeColor: 'red',
 fontSize: 30
}

多くの場合、テンプレートをわかりやすくするために、スタイル オブジェクトに直接バインドする方が良いです:

<div v-bind:style="styleObject"></div>

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

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

3. 配列構文

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

<div v-bind:style="[styleObjectA, styleObjectB]">

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

v-bind:style が使用される場合、ベンダーは必須 CSS プロパティ (transform など) に接頭辞を付ける場合、Vue.js は対応する接頭辞を自動的に検出して追加します。

4. まとめ

上記は、vue.js のバインディング クラスとスタイルの内容をすべてまとめたものであり、vue を学習する皆さんの参考になると思います。 .js 、エディターは vue.js に関する情報を更新し続けます。興味のある方は、php 中国語 Web サイトに引き続き注目してください。

バインディング クラスとスタイルに関する vue.js 入門チュートリアルに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。