Vue.jsでスタイルとクラスのバインディングを使用する方法

序章

この記事では、Vue.jsの動的スタイルとクラスバインディングについて学習します。 v-bind:styleディレクティブを使用すると、クリックイベントでフォントサイズを視覚化できます。 v-bind:classを使用すると、要素に複数のクラスを適用する方法を観察できます。

これはDOM操作で可能ですが、Vue.jsを使用すると、簡潔なコード行でスタイリングとクラスの両方を動的にレンダリングでき、そのデータモデル構造を利用できます。

スタイルを動的にバインドする

ユーザー入力に基づいてフォントサイズを増減する方法をVue.jsで開発しましょう。この目的のために、Vueはv-bind:styleディレクティブを提供します。

App.jsファイル内で、Vueインスタンスをインスタンス化し、データモデルを含めます。

App.js

data() {
  return {
    fontSize: 10
  }
}

index.htmlファイルに2つのボタンを作成し、v-bind:styleディレクティブを取り込むパラグラフを作成します。

index.html

<button v-on:click="fontSize++">
  Increase font size
</button>
<button v-on:click="fontSize--">
  Decrease font size
</button>

<p v-bind:style="{ fontSize: fontSize + 'px' }">
  Font size is: {{ fontSize }}
</p>

クリックイベントごとに、v-bind:styleディレクティブはfontSize変数の値をインクリメントおよびデクリメントします。これにより、fontSizeの値がCSSfont-sizeプロパティに付加されます。

必要に応じて、v-bind:styleディレクティブに複数のスタイルオブジェクトを追加します。 App.jsファイルに、次のようにスタイルオブジェクトを含めます。

App.js

data() {
  return {
      baseStyles: {
      fontWeight:'800',
      color: 'red'
    },
      overrideStyles: {
      color:'blue'
    } 
  }
}

index.htmlファイルで、スタイルオブジェクトの配列を指定します。

index.html

<p v-bind:style="[baseStyles, overrideStyles]">
  baseStyles and overrideStyles
</p>

注：次の要素のロジックは前の要素をオーバーライドするため、配列内のスタイルオブジェクトの順序に注意してください。

スタイルバインディングを確認したので、Vue.jsの動的クラスについて考えてみましょう。

クラスを動的にバインドする

要件の変化に応じて、スタイルを直接適用すると複雑になる可能性があります。これを支援するために、v-bind:classディレクティブは、クラスを要素内のコンテンツにバインドする方法を提供します。

たとえば、要素のテキストに下線を付け、色とフォントの太さを変更する必要がある場合があります。

これはスタイルバインディングを使用して実装できますが、Vue.jsではv-bind:classディレクティブを使用して追加のパフォーマンスを含めることができます。

これを実現するには、App.jsファイルにmenuItemsとselected変数の配列をデフォルト値'Home'で作成します。

App.js

data() {
  return {
    selected: 'Home',
    menuItems: ['Home', 'About', 'Contact']
  }
}

index.htmlファイルで、順序付きリスト内にv-forループを適用して、menuItems配列の要素を反復処理します。

クリックイベントごとに、v-bind:classディレクティブは、selected変数の値をmenuItemsの現在の要素に割り当てます。これにより、いくつかのクラスを順序付きリスト要素に渡すことができ、CSSにリストされているスタイルを追加できます。

index.html

<ul>
  <li v-for="item in menuItems"
    v-on:click="selected = item"
    v-bind:class="{ selected: selected == item}">
      {{item}}
  </li>
</ul>

v-bind:classディレクティブを使用して、配列内の複数のクラスを渡すこともできます。

App.jsファイル内のデータモデルでクラスの配列を定義します。

Apps.js

data() {
  return {
    classArray: ['selected', 'underlined']
  }
}

index.htmlファイルで、v-bind:classディレクティブを使用してclassArrayを参照します。

index.html

<p v-bind:class="[classArray]">
  Multiple classes {{ classArray }}
</p>

これにより、selectedクラスとunderlinedクラスの両方が要素に適用されます。

結論

Vue.jsスタイルおよびクラスディレクティブを使用すると、要素内で動的なアクションが維持され、より強力なパフォーマンスのために複数のインスタンスがサポートされます。