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

序章

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

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

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

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

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

data() {
  return {
    fontSize: 10
  }
}

に2つのボタンを作成します index.html ファイル、およびを取り込むパラグラフ v-bind:style 指令：

<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 CSSに font-size 財産。

必要に応じて、複数のスタイルオブジェクトをに追加します v-bind:style 指令。 あなたの中で App.js ファイルには、次のようにスタイルオブジェクトを含めます。

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

あなたの中で index.html ファイル、スタイルオブジェクトの配列を提供します。

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

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

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

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

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

これはスタイルバインディングを使用して実装できますが、Vue.jsを使用すると、 v-bind:class 指令。

これを実現するには、次の配列を作成します menuItems と selected デフォルト値が 'Home' あなたの中で App.js ファイル：

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

あなたの中で index.html ファイル、適用 v-for 順序付きリスト内でループして、 menuItems 配列。

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

<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 ファイル：

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

あなたの中で index.html ファイル、あなたを参照してください classArray を使用して v-bind:class 指令。

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

これは両方に適用されます selected そしてその underlined 要素へのクラス。

結論

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