[Vue.js] Vue.js v-for
v-for
HTML 태그를 랜더링 할 때 특정 부분을 반복할 수 있다. Python Enumerate 처럼 index 값과 함께 받아오는 작업도 가능하며, 반복되는 태그에 v-if 태그를 적용하는 것도 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<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)
this.input1 = ''
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<ul>
<li v-for='a1 in array1'>
<h3 v-if='a1 != 10'></h3>
</li>
</ul>
<hr/>
<ul>
<li v-for='(a1, idx) in array1'>
:
</li>
</ul>
<hr/>
<input type='text' v-model='input1'/>
<button type='button' @click='addArray2'>추가</button>
<ul>
<li v-for='a2 in array2'></li>
</ul>
</div>
</body>
</html>
Leave a comment