Vue में style attribute के माध्यम से स्टाइलिंग
CSS स्टाइल्स को सीधे
style attribute के माध्यम से जोड़ा जा सकता है।
इसके लिए attribute में एक ऑब्जेक्ट पास किया जाता है, जिसमें वांछित
CSS प्रॉपर्टीज़ इस ऑब्जेक्ट की keys होनी चाहिए,
और संबंधित CSS प्रॉपर्टीज़ के values -
इस ऑब्जेक्ट के values होने चाहिए।
आइए उदाहरण के लिए किसी पैराग्राफ को लाल रंग में रंगें और हरे रंग की बॉर्डर जोड़ें:
<template>
<p :style="{color: 'red', border: '1px solid green'}">
text
</p>
</template>
आइए अब बॉर्डर के बजाय इसका
font-size 30px में सेट करें। चूंकि
ऑब्जेक्ट में हाइफन वाली key नहीं हो सकती, हमें
इसे उद्धरण चिह्नों में लेना चाहिए:
<template>
<p :style="{color: 'red', 'font-size': '30px'}">
text
</p>
</template>
font-size के बजाय
fontSize भी लिखा जा सकता है
- यह भी काम करेगा:
<template>
<p :style="{color: 'red', fontSize: '30px'}">
text
</p>
</template>
एक पैराग्राफ दिया गया है। इसके टेक्स्ट को हरे रंग में रंगें, और इसकी बैकग्राउंड - पीले रंग में।
एक पैराग्राफ दिया गया है। इसके टेक्स्ट को बोल्ड और इटैलिक बनाएं।
