<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 개념이 어려웠는데 조금씩 알 것 같다.
- 10
- 20
- 30
- 40
- 50
- 0 : 10
- 1 : 20
- 2 : 30
- 3 : 40
- 4 : 50
728x90
'ETC > Vue.js' 카테고리의 다른 글
| Vue.js DB 엔터값 줄바꿈 css style 태그로 초간단 출력하게 하기 (0) | 2022.12.21 |
|---|---|
| v-bind + 이벤트 핸들링 정리잘하신 블로그 (1) | 2022.12.21 |
| v-html / v-bind vue 코드에 html 코드 삽입 (0) | 2022.12.19 |
| beforeCreate / created Vue 생성주기 (0) | 2022.12.19 |
| Vue 시작은 객체 생성부터, function () { [native code] } 오류 (0) | 2022.12.18 |
댓글