<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>구구단</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>변수의 연산</h2>
<div><span>a = </span> <input type="text" v-model="a"> </div>
<div><span>b = </span> <input type="text" v-model="b"> </div>
<button v-on:click="onClickPlus">덧셈</button>
<button v-on:click="onClickMinus">뺄셈</button>
<button v-on:click="onClickMultiple">곱셈</button>
<button v-on:click="onClickDivide">나눗셈</button>
<button v-on:click="onClickOther">나머지</button>
<div>{{result}}</div>
</div>
<script>
const app = new Vue({
el: '#root',
data: {
a: "",
b: "",
result: "0"
},
methods: {
onClickPlus() {
this.result = parseInt(this.a) + parseInt(this.b);
},
onClickMinus() {
this.result = parseInt(this.a) - parseInt(this.b);
},
onClickMultiple() {
this.result = parseInt(this.a) * parseInt(this.b);
},
onClickDivide() {
this.result = parseInt(this.a) / parseInt(this.b);
},
onClickOther() {
this.result = parseInt(this.a) % parseInt(this.b);
}
}
});
</script>
</body>
</html>
덧셈
뺄셈
곳셈
나눗셈
나머지
