Posted in vuejs

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

   Published Date: 2020年5月14日

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

スタイルをVueから反映

[CSS]

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

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

[JavaScript]

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>

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

[JavaScript]

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>

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

[JavaScript]

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

dataの中にはcolorSetとboxSetという2種類を作成します。



Author: webmaster