Vue framework တွင် Attributes များနှင့် အလုပ်လုပ်ခြင်း

data မှ ဂုဏ်သတ္တိများ၏တန်ဖိုးများကို စာသားအတွင်းသာ မဟုတ်ပဲ tag များ၏ attributes များအတွင်းလည်း ထည့်သွင်းနိုင်ပါသည်။ ၎င်းကို directive v-bind ကိုအသုံးပြု၍ လုပ်ဆောင်ပါသည်။

ယခု ဤ directive ကိုသုံး၍ img tag အတွက် attribute src ၏တန်ဖိုးကို သတ်မှတ်ကြပါစို့။ လိုချင်သောတန်ဖိုးကို အောက်ပါ property ထဲတွင် သိမ်းထားသည်ဆိုပါစို့:

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

Property မှ တန်ဖိုးကို attribute src ထဲသို့ ရေးထည့်ကြပါမည်:

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

ပုံမှန်အားဖြင့် v-bind ၏ အတိုကောက်ပုံစံကိုသာ အသုံးပြုကြပါသည်။ ၎င်းသည် attribute ၏နာမည်ရှေ့တွင် ကိုလန်းတစ်လုံးထား၍ ဖော်ပြထားခြင်းဖြစ်သည်:

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

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

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