Vueインスタンスのdataで指定した要素をHTMLの中に指定したv-bind:styleに反映させる方法です。
CSSでcolor,background-colorを作成しておき、そのスタイルを反映させていきます。
スタイルをVueから反映
[CSS]
|
0 1 2 3 4 5 6 7 8 |
.red{ color: red; } .yellow{ background-color: yellow; } |
[HTML]
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-bind:style="{color: colorA,'background-color': colorB}"> Hello World </p> </div> </body> </html> |
要素のタグの中にv-bind:style=”{}”を作成します。
この中に 「color: dataで指定する要素名」というような書式で記載していきます。
注意が必要なのはbackground-colorのようなケバブケースの場合です。このときはシングルクォーテーションで囲む必要があります。
[JavaScript]
|
0 1 2 3 4 5 6 7 8 |
new Vue({ el: '#app', data:{ colorA:'red', colorB:'yellow' } }) |
こちらはdataの中にcolorAとcolorBを作成しておくシンプルなものになります。
これでVueコンポーネントで指定したカラーを反映させることができます。
Styleをまとめて指定（1グループ）
文字の色、背景色をまとめてセットする方法です。
[HTML]
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-bind:style="colorSet"> Hello World </p> </div> </body> </html> |
HTMLにはVueインスタンスの中で設定するcolorSetを指定します。
v-bind:style=”colorSet”という記載になります。
[JavaScript]
|
0 1 2 3 4 5 6 7 8 9 10 |
new Vue({ el: '#app', data:{ colorSet:{ color:'red', 'background-color':'yellow' } } }) |
こちらはdataの中にcolorSetを作り、その中にcolor, ‘background-color’を指定します。background-colorはケバブケースでの記載なのでシングルクオーテーションで囲みます。
複数のスタイルセットを反映
今度はカラー関係と要素の大きさの2つのグループ作ってみます。
[HTML]
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-bind:style="[colorSet,boxSet]"> Hello World </p> </div> </body> </html> |
v-bind:style=”[要素1,要素2]”という配列の形で指定します。
[JavaScript]
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
new Vue({ el: '#app', data:{ colorSet:{ color:'red', 'background-color':'yellow' }, boxSet:{ width: '120px', height: '200px' } } }) |
dataの中にはcolorSetとboxSetという2種類を作成します。
