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

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

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

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

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

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

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

<template>
	<img :src="attr">
</template>

data ထဲတွင် စာသားတစ်ခုနှင့် လင့်ခ်တစ်ခု၏လိပ်စာကို သိမ်းထားသည်ဆိုပါစို့:

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

ဤဒေတာများကို အသုံးပြု၍ အောက်ပါကုဒ်ကို ဖွဲ့စည်းပေးပါ:

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