სტილიზაცია 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>