기능
1. 1~9까지의 숫자 중, 임의의 숫자를 2개 불러온다.
2. 입력창(Input)에 정답을 입력하면 정답/오답을 판독하여 알려준다.
3. 자동으로 다음 문제로 이동한다.
이 것은 HTML에서 Vue 인스턴스의 데이터를 사용하는 방법과 메소드를 호출하는 방법을 익히는 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이것은 테스트</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{first}} 곱하기 {{second}}는 얼마입니까?</h1>
<input type="number" v-model="value" />
<button @click="checkResult">제출</button>
<h2>{{result}}</h2>
</div>
<script>
const app = new Vue({
el: "#root",
data: {
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: "",
result: "",
},
methods: {
checkResult() {
if (this.first * this.second === parseInt(this.value)) {
this.result = "정답입니다! 다음 문제 갑니다";
this.value = "";
setTimeout(() => {
this.first = Math.ceil(Math.random() * 9);
this.second = Math.ceil(Math.random() * 9);
this.result = "";
}, 2000);
} else {
this.result = "틀렸습니다. 다시 입력하세요.";
this.value = "";
}
},
},
});
</script>
</body>
</html>
'개발 > Vue.js' 카테고리의 다른 글
| Uncaught SyntaxError: Invalid shorthand property initializer 에러 (0) | 2020.12.11 |
|---|---|
| [Vue공부] 가장 기초 - HTML에 {{ }}을 사용하기 : 선언적 렌더링 (0) | 2020.12.08 |
