반응형
- 학생들의 이름, 점수를 입력받고 출력해주는 예시를 통해 v-for, 배열 개념 정리
v-for, 배열 사용 예제
<body>
<div id = "test">
<form v-on:submit="SubmitForm">
<input type="number" v-model="input">
<button type="submit">입력</button>
</form>
<ul>
<li v-for="i in inputlist">
<div>{{i}}</div>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: "#test",
data: {
input: '',
inputlist: [],
},
methods: {
SubmitForm(e){
e.preventDefault();
this.inputlist.push(this.input);
this.input = '';
},
},
});
</script>- HTML의 li 태그에 v-for을 사용
- inputlist의 객체들을 i로 받아오고 i를 출력해주는 방식
- Script 부분에서는 form 제출시, inputlist라는 배열에 입력값인 input을 넣어줌
v-for의 index 사용하기
- 객체를 받아올 때, 몇번째 객체인지 알고싶으면 index 사용
<li v-for="(i,index) in inputlist">
<div>{{index}}번째 숫자 = {{i}}</div>
</li>배열에 객체 넣기
- 다음과 같은 방법으로 배열에 객체를 삽입할 수 있음
this.inputlist.push({
name: this.name,
score: this.name2,
});학생들의 이름, 점수를 입력받아 출력해주는 예제
<body>
<div id = "test">
<form v-on:submit="SubmitForm">
<div>이름입력 : <input type="text" v-model="name"></div>
<div>점수입력 : <input type="number" v-model="score"></div>
<button type="submit">입력</button>
</form>
<ul>
<li v-for="(i,index) in inputlist">
<div>{{index+1}}번째 학생({{i.name}})의 점수 = {{i.score}}</div>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: "#test",
data: {
name:'',
score: '',
inputlist: [],
},
methods: {
SubmitForm(e){
e.preventDefault();
this.inputlist.push({
name: this.name,
score: this.score,
});
this.name = '';
this.score = '';
},
},
});
</script>결과
반응형
'Vue.js' 카테고리의 다른 글
| [Vue.js] Vuetify 설치방법 및 실행방법 (0) | 2021.11.29 |
|---|---|
| [Vue.js] Vue Cli 설치방법 및 실행방법 (0) | 2021.11.25 |
| [Vue.js] props속성, v-bind, camelCase, kebab-case (0) | 2021.08.21 |
| [Vue.js] 컴포넌트(전역 컴포넌트, 지역 컴포넌트) (0) | 2021.08.20 |
| [Vue.js] v-model, v-on:submit, 랜덤숫자생성, event.preventDefault() (0) | 2021.08.20 |