Vue 이벤트 처리(v-on)

박경준·2021년 11월 3일
0

vue beginner

목록 보기
7/18

v-on 디렉티브

v-on 디렉티브는 @로도 사용 가능하다.

// /views/EventClick
<template>
<div>
 <button type="button" @click="increaseCounter">Add 1</button>
 <p>The counter is : {{counter}} </p>
</div>
</template>
<script>
export default {
 data() {
   return {
     counter: 0
   };
 },
 methods: {
   increaseCounter(){
     this.counter = this.counter + 1;
   }
 }
}
</script>

파라미터를 사용하는 함수 호출

<template>
<div>
 <button type="button" @click="setCount(7)">set Num</button>
 <p>The counter is : {{counter}} </p>
</div>
</template>
<script>
export default {
 data() {
   return {
     counter: 0
   };
 },
 methods: {
   setCount(counter){
     this.counter = counter;
   }
 }
}
</script>

@click에 함수 여러개를 바인딩할 때

<template>
<div>
 <button type="button" @click="increaseCounter(), alertFunc()">Add 1</button>
 <p>The counter is : {{counter}} </p>
</div>
</template>
<script>
export default {
 data() {
   return {
     counter: 0
   };
 },
 methods: {
   increaseCounter(){
     this.counter = this.counter + 1;
   },
   alertFunc() {
     alert('아라라')
   }
 }
}
</script>
profile
빠굥

0개의 댓글