728x90
반응형
이벤트와 연결하기 : v-on
- 버튼 클릭 or 키 입력 시 사용한다.
- <태그명 v-on:이벤트="메소드명"> => 메소드는 Vue 인스턴스에 methods 옵션을 추가해서 만든다.
<body>
<!--클릭 시에 대한 이벤트 : v-on-->
<h2>클릭하면 증가하는 예제</h2>
<div id="app">
<!--글자 색(노랑), 배경색 변경(초록), 크기(2배)-->
<p v-bind:style="{color:'yellow', backgroundColor:'green', fontSize:'200%'}">
{{ count }} 회
</p>
<button v-on:click="countup"> 1씩 증가 </button>
<button v-on:click="countdown"> 1씩 감소 </button>
<button v-on:click="countreset"> 다시하기 </button>
</div>
<script>
new Vue({
el: '#app',
data : {
count : 0
},
methods : {
countup : function(){
this.count++;
},
countdown : function(){
this.count--;
},
countreset : function(){
this.count = 0;
}
}
})
</script>
</body>
- 파라미터를 전달하여 메소드 실행하기 : ex) v-on:click="countUp(3)"
<body>
<!--클릭 시에 대한 이벤트 : v-on-->
<div id="app">
<h2>클릭하면 증가하는 예제</h2>
{{ count }} 회
<h3>파라미터를 전달하여 메소드 실행하기</h3>
<!--클릭하면 지정된 값만큼 증가시키는 예제-->
<button v-on:click="countUp(3)">3증가</button>
<button v-on:click="countUp(10)">10증가</button>
<button v-on:click="countUp(100)">100증가</button>
</div>
<script>
function good(){
alert("좋아요~~");
}
new Vue({
el: '#app',
data : {
count : 0,
isClick : false,
},
methods : {
countUp : function(value){
this.count += value;
}
}
})
</script>
</body>
- 버튼 클릭 시 프롬프트 띄워서 원하는 수 만큼 증가시키기
<body>
<!--클릭 시에 대한 이벤트 : v-on-->
<div id="app">
<h2>클릭하면 증가하는 예제</h2>
{{ count }} 회
</p>
<h3>파라미터를 전달하여 메소드 실행하기</h3>
<!--클릭하면 지정된 값만큼 증가시키는 예제-->
<button v-on:click="countUp(3)">3증가</button>
<button v-on:click="countUp(10)">10증가</button>
<button v-on:click="countUp(100)">100증가</button>
<button v-on:click="countUP(value)">원하는 수 만큼 증가</button>
</div>
<script>
function good(){
alert("좋아요~~");
}
new Vue({
el: '#app',
data : {
count : 0,
isClick : false,
value : 0
},
methods : {
countUP : function(value){
value = parseInt(prompt('얼만큼 증가시키겠습니까?', '5'));
this.count += value;
}
}
})
</script>
</body>
728x90
반응형