반응형
코드
- 더하기 문제 맞추기 예시를 통해 v-model, v-on:submit, 랜덤숫자생성, event.preventDefault()에 대해 정리
<body>
<div id="test">
<div>{{num1}} + {{num2}} = ?</div>
<form v-on:submit="SubmitForm">
<input type="number" v-model="input">
<button type="submit">입력</button>
<div>{{result}}</div>
</form>
</div>
</body>
<script>
new Vue({
el: "#test",
data: {
num1: Math.ceil(Math.random()*10 ),
num2: Math.ceil(Math.random()*10 ),
input: '',
result: '',
},
methods: {
SubmitForm(event){
event.preventDefault();
if(this.num1 + this.num2 == this.input){
this.result="정답";
this.num1 = Math.ceil(Math.random()*10 );
this.num2 = Math.ceil(Math.random()*10 );
this.input = '';
} else{
this.input = '';
this.result = "오답";
}
},
},
});
</script>코드 설명
- Math.ceil(Math.random()*10) 을 통해 1~10사이의 랜덤 숫자 생성
- input 태그에서 v-model을 사용함으로써 input과 연결
- button의 type을 submit으로 지정해줌으로써 이 버튼이 폼 데이터를 제출하는 버튼이라는 것을 지정
- 버튼이 클릭되면 v-on:submit이 실행되어서, SubmitForm 메소드 실행
- 입력값이 두 랜덤숫자들의 합과 같으면 result를 "정답"으로 설정하고 다음문제 출제
- 다르면 result를 "오답"으로 설정
- 이 때, event.preventDefault()를 통해 페이지 새로고침을 방지함
- 만약 안써주면 입력 버튼 클릭을 통한 폼 제출시 바로 페이지 새로고침이 됨
결과
- 문제 출제
- 오답 입력 시
- 정답 입력 시
정리
- v-model : Vue 인스턴스에서 데이터 속성과 HTML 요소를 연결할 때 사용
- v-on:submit : 폼 제출시 사용
- v-on:click과 마찬가지로 v-on:submit 대신 @submit을 써줘도 됨
- Math.random() : 0~1사이의 소수 난수 발생
- Math.ceil() : 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자 return
- event.preventDefault() : 폼 제출 시 페이지 새로고침 방지
반응형
'Vue.js' 카테고리의 다른 글
| [Vue.js] v-for(index), 배열 (0) | 2021.08.22 |
|---|---|
| [Vue.js] props속성, v-bind, camelCase, kebab-case (0) | 2021.08.21 |
| [Vue.js] 컴포넌트(전역 컴포넌트, 지역 컴포넌트) (0) | 2021.08.20 |
| [Vue.js] v-if, v-else, v-else-if, v-on:click (0) | 2021.08.19 |
| [Vue.js] 인스턴스, 속성(el, data, methods) (0) | 2021.08.19 |