Стилизација преко атрибута style у Vue-у

CSS стилови се могу директно додавати преко атрибута style. За то се у атрибут прослеђује објекат, у коме жељена CSS својства морају бити кључеви тог објекта, а одговарајуће вредности CSS својстава - вредностима тог објекта.

Хајде за пример да обојимо неки пасус у црвену боју и додамо му зелену оквир:

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

Хајде сада уместо оквира да му поставимо font-size на 30px. Пошто у објекту не може бити кључа са цртицом, морамо да га ставимо у наводнике:

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

Може се и уместо font-size написати fontSize - и то ће такође радити:

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