Vue event

<div id="app1">
    <dl>
        <dd>    
            <button v-on:click="amount+=10">+10</button>
            <button v-on:click="amount-=50">-50</button>
            <button v-on:click="amount+=1000">+1000</button>
        </dd>
        ~~~~<dd>
            <input type="text" v-model="amount">
        </dd>
    </dl>
</div>

일반 onclick과 동일하게 문장을 사용해서 event 처리할 수 있다.

<div id="app1">
    <dl>
        <dt>2. 예금, 인출 단, - 통장 아님</dt>
        <dd>
            입출금 금액 : <input type="number" v-model="money">
        </dd>
        <dd>
            <button @click="deposit">예금</button>
            <!-- 1회만 가능 -->
            <button @click.once="withdraw">인출</button>
        </dd>
    </dl>

</div>

<script>
    new Vue({
        el: "#app1",
        data: {
            amount: 0,
            money: 0
        },
        methods: {
            deposit: function () {
                this.amount += parseInt(this.money);
            },
            withdraw: function () {
                let m = parseInt(this.money)
                if (this.amount >= m) {
                    this.amount -= m;
                } else {
                    alert("잔고 부족");
                }
            }
        }
    })
</script>

일반 onclick과 다른 점은 해당 Vue 객체의 함수만 호출이 가능하다는 것이다.

Discussion and feedback