More than 3 years have passed since last update.

【Vue.js】オブジェクト構文について

Last updated at 2020-07-23Posted at 2020-07-20

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

オブジェクト構文について

スタイルを指定する場合には「オブジェクト構文」と呼ばれる書き方をします。

v-bind:class="{ クラス名 : 変数 }"

クラス名の後に変数を指定することができます。

クラスの数が増えてくると、v-bind:class内に全て記述するのが難しくなってきます。なのでv-bind:classにはオブジェクトを値として設定することができます。

classにv-bindで値を設定する際にオブジェクト構文を使用して多数のクラスを用意することができました。このオブジェクト構文は他の所でも使用できます。その一つが「style」属性です。

v-bind:style=" オブジェクト構文 "

このようにv-bind:styleにオブジェクト構文を使用して値を設定することができます。style属性はスタイル名と値を必要なだけ記述していきます。

このvi-bind:styleの場合も、v-bind:classと同様にオブジェクトを値に設定することが可能。設定したオブジェクトの中に、スタイル情報をプロパティとして組み込んでおくことができれば値の設定はもっと容易になります。