-
[Vue.js]v-on이용해서 간단한 계산기 만들기 예제Languages/Vue.js 2021. 4. 2. 14:22반응형
v-on이용해서 간단한 계산기 만들기 예제
<!DOCTYPE html> <html> <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"> <link rel="stylesheet" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>계산기 만들기</title> </head> <body> <h2>간단한 계산기</h2> <div id = "app"> <input v-model.number = "num1"> <input v-model.number = "num2"><br><br> <button v-on:click="addCal">더하기</button> <button v-on:click="subCal">빼 기</button> <button v-on:click="mulCal">곱하기</button> <button v-on:click="divCal">나누기</button> <p>결과는 {{ result }} 입니다.</p> </div> <script> new Vue({ el : '#app', data : { num1 : 0, num2 : 0, result : 0 }, methods : { addCal:function(){ this.result = this.num1 + this.num2 }, subCal:function(){ this.result = this.num1 - this.num2 }, mulCal:function(){ this.result = this.num1 * this.num2 }, divCal:function(){ this.result = this.num1 / this.num2 } } }) </script> </body> </html>
실행결과
반응형'Languages > Vue.js' 카테고리의 다른 글
[Vue.js] 구글 차트 그리기 (0) 2021.05.13 [Vue.js]Vue를 이용한 테이블 만들기 예제(+css) (0) 2021.04.08 [Vue.js]v-bind/다양한 바인딩 만들기/뷰를 이용한 이미지 업로드/url 업로드/폰트크키/컬러지정 (0) 2021.04.02 [Vue.js]Vue예제 클릭한 횟수를 표시하는 버튼 +css (0) 2021.03.11 [Vue.js]Vue.js 의 시작/hello vue.js 만들기 (1) 2021.03.11