Стылізацыя праз атрыбут style у Vue

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>