Written by
최태열
on
on
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