아래와 같은 script src 경로로 vue 호출
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>좋아요</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>{{first}}곱하기 {{second}}는?</div>
<form v-on:submit="onSubmitForm">
<input type="number" ref="answer" v-model="value"/>
<button type="submit">입력</button>
</form>
<div id="result">{{result}}</div>
</div>
</body>
<script type="text/javascript">
const app = new Vue({
el: '#root',
data: {
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
result: '',
},
methods: {
onSubmitForm(e) {
e.preventDefault();
if(this.first * this.second === parseInt(this.value)) {
this.result = '정답';
this.first = Math.ceil(Math.random() * 9),
this.second = Math.ceil(Math.random() * 9),
this.value = '';
this.$refs.answer.focus();
} else{
this.result = '땡';
this.value = '';
this.$refs.answer.focus();
}
},
},
});
</script>
</html>
정답이 맞을 경우 first / second 값을 랜덤 처리로 호출하며 구구단 처리 소스
[참조]
https://www.youtube.com/watch?v=TIHluPn05VY&list=PLcqDmjxt30RsdnPeU0ogHFMoggSQ_d7ao
반응형
'프로그래밍 > Vue' 카테고리의 다른 글
| [Vue3] onMounted (0) | 2024.05.14 |
|---|---|
| [Vue3] Computed (0) | 2024.04.26 |
| Vue.js 2.0 라이프 사이클 (0) | 2024.02.21 |
| [Vue.js] Props 란 (0) | 2022.06.30 |