Vue හි වස්තු හරහා පුනරාවර්තනය කිරීම
වස්තු ද v-for උපදෙස් භාවිතයෙන්
හරහා පුනරාවර්තනය කරනු ලැබේ.
අපි බලමු එය කරන්නේ කෙසේදැයි.
අපට පහත වස්තුව ඇතැයි සිතමු:
data() {
return {
obj: {a: 1, b: 2, c: 3},
}
}
අපි මෙම වස්තුව චක්රයකින් හරහා පුනරාවර්තනය කර එහි මූලද්රව්ය ප්රදර්ශනය කරමු:
<template>
<p v-for="elem in obj">
{{ elem }}
</p>
</template>
දැන් අපි යතුරු සහ මූලද්රව්ය දෙකම ප්රදර්ශනය කරමු:
<template>
<p v-for="(elem, key) in obj">
{{ key }} {{ elem }}
</p>
</template>
දැන් අපි වස්තුවේ මූලද්රව්යවල අනුක්රමික අංක ද ප්රදර්ශනය කරමු:
<template>
<p v-for="(elem, key, index) in obj">
{{ index }}
{{ key }}
{{ elem }}
</p>
</template>
පහත වස්තුව ලබා දී ඇත:
{
user1: '100
,
user2: '200
,
user3: '300
,
}
v-for භාවිතයෙන් තිරය මත පහත දේ ප්රදර්ශනය කරන්න:
<ul>
<li>100$</li>
<li>200$</li>
<li>300$</li>
</ul>
පහත වස්තුව ලබා දී ඇත:
{
user1: '100
,
user2: '200
,
user3: '300
,
}
v-for භාවිතයෙන් තිරය මත පහත දේ ප්රදර්ශනය කරන්න:
<ul>
<li>user1 - 100$</li>
<li>user2 - 200$</li>
<li>user3 - 300$</li>
</ul>
එක් එක් li අවසානයේ වස්තුවේ මූලද්රව්යයේ අනුක්රමික
අංකය ද ඇතුළත් වන පරිදි පෙර කාර්යය වෙනස් කරන්න. මෙවැනිව:
<ul>
<li>user1 - 100$ - 0</li>
<li>user2 - 200$ - 1</li>
<li>user3 - 300$ - 2</li>
</ul>
අංක බිංදුවෙන් නොව එකෙන් ආරම්භ වන පරිදි පෙර කාර්යය වෙනස් කරන්න. මෙවැනිව:
<ul>
<li>user1 - 100$ - 1</li>
<li>user2 - 200$ - 2</li>
<li>user3 - 300$ - 3</li>
</ul>
