-
[Vue.js]Vue예제 클릭한 횟수를 표시하는 버튼 +cssLanguages/Vue.js 2021. 3. 11. 15:22반응형
클릭한 횟수를 표시하는 버튼 만들기
<!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>count</title> </head> <body> <h2>클릭하면 카운트가 올라가고 내려갑니다.</h2> <div id = "app"> <p>{{ count }}회</p> <button v-on:click="countUp">카운터 업</button> <button v-on:click="countDown">카운터 다운</button> </div> <script> new Vue({ el : '#app', data : { count : 0 }, methods : { countUp : function(){ this.count++ }, countDown : function(){ this.count-- } } }) </script> </body> </html>
script를 위로 올려도 가능하다
<!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"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload = function(){ new Vue({ el : '#app', data : { count : 0 }, methods : { countUp : function(){ this.count++ }, countDown : function(){ this.count-- } } }) } </script> <title>count</title> </head> <body> <h2>클릭하면 카운트가 올라가고 내려갑니다.</h2> <div id = "app"> <p>{{ count }}회</p> <button v-on:click="countUp">카운터 업</button> <button v-on:click="countDown">카운터 다운</button> </div> </body> </html>
실행결과
css 결합
html{ width : 80%; margin-right: auto; margin-left: auto; font-family: sans-serif; font-size: 16px; ilne-height: 1.5; } input,button,select,optgroup,textarea{ font-family: inherit; font-size: inherit; line-height: inherit; } button{ cursor: pointer; padding: 6px 12px; border-radius: 6px; color: #fff; border: 2px; background-color: #007bff; transition: background-color .2s; } botton:hover{ background-color: #0069d9; } button:active{ background-color: #003c7c; } button:disabled{ opacity: .5; pointer-events: none; } input{ padding: 6px 12px; border-radius: 6px; color: #495057; border: 2px solid #ced4da; } textarea{ width: 500px; height: 200px; } select{ border:2px solid #ced4da;
실행결과
반응형'Languages > Vue.js' 카테고리의 다른 글
[Vue.js] 구글 차트 그리기 (0) 2021.05.13 [Vue.js]Vue를 이용한 테이블 만들기 예제(+css) (0) 2021.04.08 [Vue.js]v-on이용해서 간단한 계산기 만들기 예제 (0) 2021.04.02 [Vue.js]v-bind/다양한 바인딩 만들기/뷰를 이용한 이미지 업로드/url 업로드/폰트크키/컬러지정 (0) 2021.04.02 [Vue.js]Vue.js 의 시작/hello vue.js 만들기 (1) 2021.03.11