728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연산 연습하기</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>연산 연습하기</h1>
x : <input v-model.number="xNumb"><br>
y : <input v-model.number="yNumb"><br>
덧셈 결과 : {{xNumb+yNumb}}<br>
곱셈 결과 : {{xNumb*yNumb}}<br>
<h1>구구단</h1>
{{first}}곱하기 {{second}}는?<br>
<input v-model.number="mulNumb">
<button>확인</button>
<p v-if="mulNumb==(first*second)">{{result[0]}}</p>
<p v-else="mulNumb!=(first*second)">{{result[1]}}</p>
</div>
<script>
new Vue({
el : '#app',
data : {
xNumb : 0,
yNumb : 0,
first : Math.ceil(Math.random()*9),
second : Math.ceil(Math.random()*9),
mulNumb : '',
result : ['정답', '오답']
},
method : {
}
})
</script>
</body>
</html>* 위 코드는 확인버튼을 누르지 않아도 정답유무 결과를 출력함...
728x90
반응형