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>