Vue.jsではHTML要素の属性を指定する際にv-bindディレクティブを使用します。
v-bindディレクティブによるバインディングでは、HTMLの要素が持つクラスやスタイルなどの属性にプログラム（JavaScript）で定義したオブジェクトなどを指定することができます。
v-bindディレクティブでは、HTML要素のあらゆる属性とデータバインディングができますが、今回はv-bindディレクティブを使用したstyle属性（CSSスタイル）のバインディングについて紹介します。
本記事では、v-bindディレクティブの基本についての説明は割愛します。
v-bindディレクティブの基本については、以下の記事をご覧ください。
目次
v-bindディレクティブでstyle属性にバインドする
v-bindディレクティブでstyle属性にバインドする時は、以下のように記述します。
|
1 |
<要素名 v-bind:style="{CSSのプロパティ名: 値}"> |
style属性にバインドする場合は、JavaScriptのオブジェクトを指定します。指定するオブジェクトのプロパティ名がCSSのプロパティ名になり、オブジェクトの値がCSSプロパティの値になります。
「値」にはdataオプション、computedオプションに定義したプロパティ名、methodsオプションに定義したメソッド名を指定することができます。
style属性にスタイルをバインドする
ここでは、style属性にスタイルをバインドする例をいくつか示します。
style属性にCSSプロパティを1つ指定する
JavaScript
|
1 2 3 4 5 6 7 |
Vue.createApp({ data: function() { return { fontBold: 'bold' } } }).mount('#app') |
HTML
|
1 2 3 4 5 |
<div id="app"> <div v-bind:style="{fontWeight: fontBold}"> テキスト </div> </div> |
ここでは、CSSのfont-weightプロパティに指定する値をdataオプションに定義しています。
dataオプションのfontBoldプロパティに「bold」を定義し、その値をv-bindディレクティブでバインドしています。
v-bindディレクティブでstyle属性にバインドする際は、CSSのプロパティ名をケバブケース（kebab-case）ではなくキャメルケース（camelCase）で指定します。（font-weightではなくfontWeight）
例に示したコードを実行すると、次のHTMLが出力されます。
|
1 2 3 |
<div style="font-weight: bold"> テキスト </div> |
上記の例ではスタイルを1つだけ指定していますが、複数のスタイルを指定することも可能です。
style属性にCSSプロパティを複数指定する
以下に複数のスタイルをバインドする例を示します。
JavaScript
|
1 2 3 4 5 6 7 8 9 |
Vue.createApp({ data: function() { return { fontBold: 'bold', foreColor: 'blue', fontSize: '24pt' } } }).mount('#app') |
HTML
|
1 2 3 4 5 |
<div id="app"> <div v-bind:style="{fontWeight: fontBold, color: foreColor, fontSize: fontSize}"> テキスト </div> </div> |
複数のスタイルを指定する場合は、カンマで区切って指定します。
出力されるHTMLは次のようになります。
|
1 2 3 |
<div style="font-weight: bold; color: blue; font-size: 24pt;"> テキスト </div> |
style属性バインドする値の指定方法
ここまでの例では、dataオプションに定義したプロパティをバインドする値に指定していますが、HTMLに直接値を記述することもできます。
|
1 2 3 4 5 |
<div id="app"> <div v-bind:style="{fontWeight: 'bold', color: 'blue', fontSize: '24pt'}"> テキスト </div> </div> |
もちろん、Vueのインスタンスに定義したオプションのプロパティをバインドする方法と、HTMLに直接値を記述する方法を混在させることもできます。
JavaScript
|
1 2 3 4 5 6 7 8 |
Vue.createApp({ data: function() { return { fontBold: 'bold', fontSize: '24pt' } } }).mount('#app') |
HTML
|
1 2 3 4 5 |
<div id="app"> <div v-bind:style="{fontWeight: fontBold, color: '#f210ed', fontSize: fontSize}"> テキスト </div> </div> |