@click 이벤트 숫자증가/감소

 

 

 

<div class="count">
   <button @click="increase" style="border:none">+</button>
   {{number}}
   <button @click="decrease" style="border:none">-</button>
</div>

 

div class로 묶어준다.

 

v:on:click 은 대체해서 @click이 가능하다!

 

border:none 을 안하면 +와 -에 테두리가 생긴다. (선택사항)

 

{{number}}은 +와 - 숫자를 보여주는 부분이다.

 

<script>
    export default {
        data() {
            return {
                number : 0
            }
        },
        components :{
        },
        methods: {
            increase : function() {
                this.number++;
            },
            decrease : function() {
                this.number--;
            }
        },
    }
</script>

 

data 안에 return값을 0으로 줘서 시작되는 값을 0으로 지정해준다.

 

@click 이벤트는 메소드 이기 때문에 methods에 넣어준다.

 

메소드 내에서 인스턴스 내부의 데이터 모델에 접근 할 때에는 this를 사용해준다.