Vueでのstyle属性を介したスタイリング

CSSスタイルは、 style属性を介して直接追加することができます。 これには、属性にオブジェクトを渡し、そのオブジェクトのキーとして目的のCSSプロパティを、 対応するCSSプロパティの値をそのオブジェクトの値として指定します。

例として、段落を赤色に塗りつぶし、緑色の境界線を追加してみましょう。

App.vue<template>
  <p :style="{color: 'red', border: '1px solid green'}">
    text
  </p>
</template>

次に、境界線の代わりに font-sizeを30pxに設定してみましょう。オブジェクトではハイフンを含むキーを持つことができないため、 引用符で囲む必要があります。

App.vue<template>
  <p :style="{color: 'red', 'font-size': '30px'}">
    text
  </p>
</template>

font-sizeの代わりに fontSizeと記述することもできます。これも同様に機能します。

App.vue<template>
  <p :style="{color: 'red', fontSize: '30px'}">
    text
  </p>
</template>