Vue හි අරා අනුක්රමණය කිරීම
Vue ඔබට චක්රයකින් ටැග් සෑදීමට ඉඩ දෙයි.
මෙය සිදු කරනු ලබන්නේ විශේෂ
අණපතක් වන v-for මගිනි. එය අරා සඳහා
ක්රියා කරන ආකාරය බලමු.
මේ සඳහා පහත අරය සාදා ගනිමු:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
මෙම අරයේ සෑම මූලද්රව්යයක්ම වෙනම ඡේදයක ඉදිරිපත් කරමු. මේ සඳහා, නිරූපණය තුළ පළමුව ඡේදයක් සාදමු:
<template>
<p></p>
</template>
දැන් අපගේ ඡේදයට
v-for අණපත ලියමු. මෙම
අණපතේ අගය ලෙස අනුක්රමණය කරන අරයේ
නම සහ මෙම අරයේ මූලද්රව්ය
අනුක්රමිකව ලැබෙන විචල්යය
නියම කළ යුතුය. අපගේ නඩුවේ අරයේ
නම arr වන අතර,
විචල්යය සඳහා අපි
elem යන නම සකස් කරමු:
<template>
<p v-for="elem in arr"></p>
</template>
එහි ප්රතිඵලයක් ලෙස අපගේ ඡේදය අපගේ අරයේ ඇති මූලද්රව්ය ගණනට සමාන වාර ගණනක් පුනරාවර්තනය වේ. අපගේ ඡේදවල අක්ෂර වින්යාසය තුළ අනුක්රමණය කරන මූලද්රව්ය ඉදිරිපත් කරමු:
<template>
<p v-for="elem in arr">{{ elem }}</p>
</template>
data තුළ පහත අරය ගබඩා කර ඇතැයි සිතමු:
data() {
return {
items: [1, 2, 3, 4, 5],
}
}
මෙම අරයේ සෑම මූලද්රව්යයක්ම තමන්ගේම
div ටැගයක ඉදිරිපත් කරන්න.
පහත අරය ලබා දී ඇත:
data() {
return {
items: [1, 2, 3, 4, 5],
}
}
මෙම අරයේ සෑම මූලද්රව්යයකම වර්ගය
තමන්ගේම div ටැගයක ඉදිරිපත් කරන්න.
පහත අරය ලබා දී ඇත:
data() {
return {
items: [1, 2, 3, 4, 5],
}
}
මෙම අරයේ මූලද්රව්ය
ul ලැයිස්තුවක් ලෙස ඉදිරිපත් කරන්න.
