Vue फ्रेमवर्क में एट्रिब्यूट्स के साथ काम करना

data से प्रॉपर्टी वैल्यूज को सिर्फ टेक्स्ट में ही नहीं, बल्कि टैग्स के एट्रिब्यूट्स में भी डाला जा सकता है। यह v-bind डायरेक्टिव की मदद से किया जाता है।

आइए इस डायरेक्टिव की मदद से img टैग के लिए src एट्रिब्यूट की वैल्यू सेट करें। मान लीजिए कि वांछित वैल्यू इस प्रॉपर्टी में स्टोर है:

App.vuedata() {
  return {
    attr: 'img.png',
  }
}

आइए प्रॉपर्टी से वैल्यू को src एट्रिब्यूट में लिखें:

App.vue<template>
  <img v-bind:src="attr">
</template>

आमतौर पर सभी v-bind के शॉर्टकट वर्जन का उपयोग करते हैं। यह एट्रिब्यूट नाम से पहले सिर्फ एक कोलन होता है:

App.vue<template>
  <img :src="attr">
</template>

App.vuedata() {
  return {
    text: 'page',
    href: 'page.html',
  }
}

html<a href="page.html">page</a>