យើងសិក្សាអំពី list rendering គឺសម្រាប់ទាញទិន្ន័យពី array មកនៅក្នុង list tag ដោយយើងប្រើ v-for
File index.html
</head>
<body>
<div class="app">
<ul>
<li v-for="bird in birds">
{{bird}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="/app.js"></script>
</body>
file app.js
const vm = Vue.createApp({
data(){
return{
birds:["dark", "kicken", "goose", "fancon", "eagle", "parrot"],
people:[
{name: "Ros Dul", age: 18},
{name: "Seng Mey", age: 25},
{name: "Dara Hong", age: 20}
]
}
}
}).mount('.app')
ហៅ index មកប្រើ
ការហៅ index មកប្រើដោយយើងបើកវងក្រចក
<div class="app">
<ul>
<li v-for="(bird, index) in birds">
{{bird}} -- {{index}}
</li>
</ul>
</div>
<div class="app">
<ul>
<li v-for="(bird, index) in birds">
{{bird}} -- {{index}}
</li>
</ul>
<hr/>
<ul>
<li v-for="person in people">
{{person.name}}
{{person.age}}
</li>
</ul>
</div>
key និង value
<div class="app">
<ul>
<li v-for="(bird, index) in birds">
{{bird}} -- {{index}}
</li>
</ul>
<hr />
<ul>
<li v-for="person in people">
<div v-for="(value, key, index) in person">
{{key}}:{{value}} - Index: {{index}}
</div>
</li>
</ul>
</div>
0 Comments