ક્લાસ અને સ્ટાઇલ બાઈન્ડિંગ્સ ​

ડેટા બાઈન્ડિંગ માટેની સામાન્ય જરૂરિયાત એ એલિમેન્ટની ક્લાસ લિસ્ટ અને ઇનલાઇન સ્ટાઇલમાં ફેરફાર કરવાની છે. કારણ કે class અને style બંને એટ્રિબ્યુટ્સ છે, અમે અન્ય એટ્રિબ્યુટ્સની જેમ જ તેમને ગતિશીલ રીતે સ્ટ્રિંગ વેલ્યુ અસાઇન કરવા માટે v-bind નો ઉપયોગ કરી શકીએ છીએ. જો કે, સ્ટ્રિંગ કોન્કેટિનેશન (concatenation) નો ઉપયોગ કરીને તે મૂલ્યો જનરેટ કરવાનો પ્રયાસ કરવો કંટાળાજનક અને ભૂલ-ભરેલું હોઈ શકે છે. આ કારણોસર, જ્યારે v-bindનો class અને style સાથે ઉપયોગ કરવામાં આવે છે ત્યારે Vue વિશેષ સુધારાઓ પ્રદાન કરે છે. સ્ટ્રિંગ્સ ઉપરાંત, એક્સપ્રેશન્સનું મૂલ્યાંકન ઓબ્જેક્ટ્સ અથવા એરે તરીકે પણ થઈ શકે છે.

HTML ક્લાસ બાઈન્ડ કરવા ​

ઓબ્જેક્ટ્સ સાથે બાઈન્ડિંગ ​

ક્લાસીસને ડાયનેમિકલી ટોગલ (toggle) કરવા માટે આપણે :class (v-bind:classનું ટૂંકું નામ) માં ઓબ્જેક્ટ પાસ કરી શકીએ છીએ:

<div :class="{ active: isActive }"></div>

ઉપરના સિન્ટેક્સનો અર્થ એ છે કે active ક્લાસની હાજરી ડેટા પ્રોપર્ટી isActive ની truthiness દ્વારા નક્કી કરવામાં આવશે.

તમે ઓબ્જેક્ટમાં વધુ ફિલ્ડ્સ રાખીને બહુવિધ ક્લાસીસને ટોગલ કરી શકો છો. વધુમાં, :class ડિરેક્ટિવ સાદા class એટ્રિબ્યુટ સાથે પણ સહ-અસ્તિત્વમાં હોઈ શકે છે. તેથી નીચેની સ્થિતિ જોતાં:

const isActive = ref(true)
const hasError = ref(false)

data() {
  return {
    isActive: true,
    hasError: false
  }
}

અને નીચેનું ટેમ્પલેટ:

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

તે રેન્ડર થશે:

<div class="static active"></div>

જ્યારે isActive અથવા hasError બદલાય છે, ત્યારે ક્લાસ લિસ્ટ તે મુજબ અપડેટ કરવામાં આવશે. ઉદાહરણ તરીકે, જો hasError એ true બને, તો ક્લાસ લિસ્ટ "static active text-danger" બની જશે.

બાઉન્ડ ઓબ્જેક્ટ (bound object) ઇનલાઇન હોવું જરૂરી નથી:

const classObject = reactive({
  active: true,
  'text-danger': false
})

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

<div :class="classObject"></div>

આ રેન્ડર થશે:

<div class="active"></div>

આપણે કમ્પ્યુટેડ પ્રોપર્ટી (computed property) સાથે પણ બાંધી શકીએ છીએ જે ઓબ્જેક્ટ પરત કરે છે. આ એક સામાન્ય અને શક્તિશાળી પેટર્ન છે:

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="classObject"></div>

એરે (Arrays) સાથે બાઈન્ડિંગ ​

ક્લાસની સૂચિ લાગુ કરવા માટે આપણે :class ને એરે (array) સાથે બાંધી શકીએ છીએ:

const activeClass = ref('active')
const errorClass = ref('text-danger')

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

<div :class="[activeClass, errorClass]"></div>

જે રેન્ડર થશે:

<div class="active text-danger"></div>

જો તમે લિસ્ટમાં શરતી રીતે (conditionally) ક્લાસ ટોગલ કરવા માંગતા હોવ, તો તમે તેને ટર્નરી (ternary) એક્સપ્રેશન સાથે કરી શકો છો:

<div :class="[isActive ? activeClass : '', errorClass]"></div>

આ હંમેશા errorClass લાગુ કરશે, પરંતુ activeClass ત્યારે જ લાગુ થશે જ્યારે isActive સત્ય (truthy) હશે.

જો કે, જો તમારી પાસે બહુવિધ શરતી ક્લાસ હોય તો આ થોડું જટિલ (verbose) હોઈ શકે છે. તેથી જ એરે સિન્ટેક્સની અંદર ઓબ્જેક્ટ સિન્ટેક્સનો ઉપયોગ કરવો પણ શક્ય છે:

<div :class="[{ [activeClass]: isActive }, errorClass]"></div>

કમ્પોનન્ટ્સ સાથે ​

આ વિભાગ કમ્પોનન્ટ્સના મૂળભૂત પાસાઓ ના જ્ઞાનને ધારે છે. તેને છોડી દેવા અને પછીથી પાછા આવવા માટે નિઃસંકોચ રહો.

જ્યારે તમે સિંગલ રૂટ એલિમેન્ટ (root element) ધરાવતા કમ્પોનન્ટ પર class એટ્રિબ્યુટનો ઉપયોગ કરો છો, ત્યારે તે ક્લાસ કમ્પોનન્ટના રૂટ એલિમેન્ટમાં ઉમેરવામાં આવશે અને તેના પર પહેલેથી અસ્તિત્વમાં હોય તેવા કોઈપણ ક્લાસ સાથે મર્જ કરવામાં આવશે.

ઉદાહરણ તરીકે, જો આપણી પાસે MyComponent નામનો કમ્પોનન્ટ નીચેના ટેમ્પલેટ સાથે હોય:

<!-- ચાઈલ્ડ (child) કમ્પોનન્ટ ટેમ્પલેટ -->
<p class="foo bar">નમસ્તે!</p>

પછી તેનો ઉપયોગ કરતી વખતે કેટલાક ક્લાસ ઉમેરો:

<!-- જ્યારે કમ્પોનન્ટનો ઉપયોગ કરી રહ્યા હોઈએ હોઈએ -->
<MyComponent class="baz boo" />

રેન્ડર કરેલ HTML હશે:

<p class="foo bar baz boo">નમસ્તે!</p>

કલાસ બાઈન્ડિંગ્સ માટે પણ આ જ સાચું છે:

<MyComponent :class="{ active: isActive }" />

જ્યારે isActive સત્ય (truthy) હશે, ત્યારે રેન્ડર થયેલ HTML હશે:

<p class="foo bar active">નમસ્તે!</p>

જો તમારા ઘટકમાં બહુવિધ રૂટ એલિમેન્ટ્સ હોય, તો તમારે તે વ્યાખ્યાયિત કરવાની જરૂર પડશે કે કયા એલિમેન્ટને આ ક્લાસ પ્રાપ્ત થશે. તમે $attrs ઘટક પ્રોપર્ટીનો ઉપયોગ કરીને આ કરી શકો છો:

<!-- $attrs નો ઉપયોગ કરીને MyComponent ટેમ્પલેટ -->
<p :class="$attrs.class">નમસ્તે!</p>
<span>આ એક ચાઇલ્ડ કમ્પોનન્ટ છે</span>

<MyComponent class="baz" />

રેન્ડર થશે:

<p class="baz">નમસ્તે!</p>
<span>આ એક ચાઇલ્ડ કમ્પોનન્ટ છે</span>

તમે Fallthrough Attributes વિભાગમાં કમ્પોનન્ટ એટ્રિબ્યુટ ઇનહેરિટન્સ (inheritance) વિશે વધુ જાણી શકો છો.

ઇનલાઇન સ્ટાઇલ્સ (Inline Styles) બાઈન્ડ કરવા ​

ઓબ્જેક્ટ્સ સાથે બાઈન્ડિંગ ​

:style જાવાસ્ક્રિપ્ટ ઓબ્જેક્ટ વેલ્યુસ સાથે બાઈન્ડિંગ સપોર્ટ કરે છે - તે HTML એલિમેન્ટની style પ્રોપર્ટી ને અનુરૂપ છે:

const activeColor = ref('red')
const fontSize = ref(30)

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

જોકે ઊંટકેસ (camelCase) કી ભલામણ કરવામાં આવે છે, :style પણ કેબાબ-કેસ્ડ (kebab-cased) CSS પ્રોપર્ટી કીને સપોર્ટ કરે છે (જે વાસ્તવિક CSS માં કેવી રીતે ઉપયોગમાં લેવાય છે તેની અનુરૂપ છે) - ઉદાહરણ તરીકે:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

સ્ટાઇલ ઓબ્જેક્ટ સાથે સીધું બાઈન્ડ કરવું એ ઘણીવાર સારો વિચાર છે જેથી ટેમ્પલેટ સ્વચ્છ રહે:

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

<div :style="styleObject"></div>

ફરીથી, ઓબ્જેક્ટ સ્ટાઇલ બાઈન્ડિંગનો ઉપયોગ અવારનવાર કમ્પ્યુટેડ પ્રોપર્ટીઝ સાથે કરવામાં આવે છે જે ઓબ્જેક્ટ પરત કરે છે.

:style ડિરેક્ટિવ્સ પણ સાધારણ સ્ટાઇલ એટ્રિબ્યુટ્સ સાથે સહ-અસ્તિત્વમાં હોઈ શકે છે, બરાબર :class ની જેમ.

ટેમ્પલેટ:

<h1 style="color: red" :style="'font-size: 1em'">hello</h1>

તે રેન્ડર થશે:

<h1 style="color: red; font-size: 1em;">hello</h1>

એરે (Arrays) સાથે બાઈન્ડિંગ ​

આપણે બહુવિધ સ્ટાઇલ ઓબ્જેક્ટ્સના એરેમાં :style ને બાંધી શકીએ છીએ. આ ઓબ્જેક્ટ્સ મર્જ કરવામાં આવશે અને તે જ એલિમેન્ટ પર લાગુ કરવામાં આવશે:

<div :style="[baseStyles, overridingStyles]"></div>

ઓટો-પ્રિફિક્સિંગ (Auto-prefixing) ​

જ્યારે તમે :style માં એવી CSS પ્રોપર્ટીનો ઉપયોગ કરો છો કે જેને વેન્ડર પ્રિફિક્સ (vendor prefix) ની જરૂર હોય, ત્યારે Vue આપમેળે યોગ્ય પ્રિફિક્સ ઉમેરશે. Vue વર્તમાન બ્રાઉઝરમાં કઈ સ્ટાઇલ પ્રોપર્ટીઝ સપોર્ટેડ છે તે જોવા માટે રનટાઈમ પર ચેક કરીને આ કરે છે. જો બ્રાઉઝર કોઈ ચોક્કસ પ્રોપર્ટીને સપોર્ટ કરતું નથી, તો પછી વિવિધ પ્રિફિક્સ્ડ વેરિઅન્ટ્સનું પરીક્ષણ કરવામાં આવશે જે સપોર્ટેડ છે તેને શોધવા માટે.

બહુવિધ મૂલ્યો (Multiple Values) ​

તમે સ્ટાઇલ પ્રોપર્ટી માટે બહુવિધ (પ્રિફિક્સ્ડ) મૂલ્યોનો એરે પ્રદાન કરી શકો છો, ઉદાહરણ તરીકે:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

આ ફક્ત એરેની અંતિમ વેલ્યુને રેન્ડર કરશે જે બ્રાઉઝર સપોર્ટ કરે છે. આ ઉદાહરણમાં, તે એવા બ્રાઉઝર્સ માટે display: flex રેન્ડર કરશે જે ફ્લેક્સબોક્સના અનપ્રિફિક્સ્ડ (unprefixed) સંસ્કરણને સપોર્ટ કરે છે.