북마크 작성자 정보
작성일/수정일
2024-09-28 14:43:27 / 2024-09-28 14:43:27
배열에서 값을 하나씩 뽑아내서 표시하는 반복
<태그 v-for="변수 in 배열">반복하는 부분<태그>
<template>
<div id="app">
<ul>
<li v-for="item in mydata">{{ item }}</li>
</ul>
</div>
</template>
<script>
new vue({
el: "#app",
data: {
mydata : [ "text1", "text2", "text3" ]
}
})
</script>
<template>
<div id="app">
<ul>
<li v-for="item in myArray">{{ item.name }} {{ item.price }}</li>
<ul>
</div>
</template>
<script>
new vue({
el: "#app",
data: {
myArray: [
{ name:"상품1", price:"500" },
{ name:"상품2", price:"600" },
{ name:"상품3", price:"700" }
]
}
})
</script>
<template>
<div id="app">
<ul>
<li v-for="(item, idex)in myArray">{{index}}: {{item}}</li>
</ul>
</div>
</template>
<script>
new vue({
el: "#app",
data: {
myArray: ['text1', "text2", "text3", "text4"]
}
})
</script>
지정한 횟수만큼 표시를 반복
<태그 v-for="변수 in 최대값">반복하는 부분</태그>
배열에서 "값과 인덱스"를 하나씩 뽑아내어 표시하는 반복
<태그 v-for="(변수, 인텍스) in 배열">반복하는 부분</태그>
