[Vue.js] StyleをVueインスタンスで指定

Vueインスタンスのdataで指定した要素をHTMLの中に指定したv-bind:styleに反映させる方法です。
CSSでcolor,background-colorを作成しておき、そのスタイルを反映させていきます。

Contents

1 スタイルをVueから反映
2 Styleをまとめて指定（1グループ）
3 複数のスタイルセットを反映

スタイルをVueから反映

[CSS]

.red{
  color: red;
}

.yellow{
  background-color: yellow;
}

.red{

color: red;

}

.yellow{

background-color: yellow;

}

[HTML]

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

Hello World

</p>

</div>

</body>

</html>

要素のタグの中にv-bind:style=”{}”を作成します。
この中に「color: dataで指定する要素名」というような書式で記載していきます。
注意が必要なのはbackground-colorのようなケバブケースの場合です。このときはシングルクォーテーションで囲む必要があります。

[JavaScript]

new Vue({
el: '#app',
data:{
	colorA:'red',
  colorB:'yellow'
 }
})

new Vue({

el: '#app',

data:{

colorA:'red',

colorB:'yellow'

}

})

こちらはdataの中にcolorAとcolorBを作成しておくシンプルなものになります。

これでVueコンポーネントで指定したカラーを反映させることができます。

Styleをまとめて指定（1グループ）

文字の色、背景色をまとめてセットする方法です。
[HTML]

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

Hello World

</p>

</div>

</body>

</html>

HTMLにはVueインスタンスの中で設定するcolorSetを指定します。
v-bind:style=”colorSet”という記載になります。

[JavaScript]

new Vue({
el: '#app',
data:{
	colorSet:{
	   color:'red',
     'background-color':'yellow'
   }
  }
})

new Vue({

el: '#app',

data:{

colorSet:{

color:'red',

'background-color':'yellow'

}

})

こちらはdataの中にcolorSetを作り、その中にcolor, ‘background-color’を指定します。background-colorはケバブケースでの記載なのでシングルクオーテーションで囲みます。

複数のスタイルセットを反映

今度はカラー関係と要素の大きさの2つのグループ作ってみます。

[HTML]

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

Hello World

</p>

</div>

</body>

</html>

v-bind:style=”[要素1,要素2]”という配列の形で指定します。

[JavaScript]

new Vue({
el: '#app',
data:{
	colorSet:{
	   color:'red',
     'background-color':'yellow'
   },
  boxSet:{
  	width: '120px',
    height: '200px'
  }
  }
})