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>