ETC/Vue.js
v-for 태그를 반복할 수 있다
java나유
2022. 12. 19. 22:47
<script>
window.onload = function() {
var vm1 = new Vue({
el : '#test1',
data : {
array1 : [ 10, 20, 30, 40, 50 ],
input1 :'', //입력하면 담기는 곳
array2 : []
},
methods :{
addArray2 :function(){
this.array2.push(this.input1) //array2에 input1을 넣음
this.input1 =''
}
}
})
}
</script>
<body>
<div id='test1'>
<ul>
<li v-for='a1 in array1'>{{a1}}</li>
</ul>
<hr/>
<ul>
<li v-for='(a1, idx) in array1'>
{{idx}} : {{a1}}
</li>
</ul>
<hr/>
<input type='text' v-model='input1'/>
<button type='button' @click='addArray2'>추가</button>
<ul>
<li v-for="a2 in array2">{{a2}}</li>
</ul>
</div>
</body>
v-for 에서 methods 개념이 어려웠는데 조금씩 알 것 같다.
- {{a1}}
- {{idx}} : {{a1}}
- {{a2}}
728x90