728x90
반응형
vueex3.html
<!DOCTYPE html>
<!-- /vue1/src/main/webapp/20220531/vueex3.html -->
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 예제2</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="simple">
<p>
<input type="text" v-model="amount" />
<!-- v-on:click.once : 한번만 이벤트 처리. 일회성 이벤트 처리. -->
</p>
<p>
<button id="create" v-on:click.once="specialEvent">계좌 개설 10000원 이벤트</button>
<button id="deposit" v-on:click="deposit">예금</button>
<button id="withdraw" v-on:click="withdraw">인출</button>
</p>
<h3>계좌잔고 : {{balance}}</h3>
</div>
<script>
let model = {
amount:0,
balance:0
}
let simple = new Vue ({
el : "#simple",
//methods : 이벤트 핸들러 정의 부분
data : model,
methods : {
specialEvent : function() {
this.balance += 10000
},
deposit : function() { //입금 버튼 클릭시 호출되는 함수
let amt = parseInt(this.amount);
if (amt <= 0) { //입력된 금액이 음수
alert("0보다 큰 값을 예금해야 합니다.");
} else {
this.balance += amt;
}
},
withdraw : function() {
let amt = parseInt(this.amount);
if (amt <= 0) {
alert("0보다 큰 값을 인출 할 수 있습니다.");
} else if (amt > this.balance) {
alert("잔고보다 많은 금액을 인출 할 수 없습니다.");
} else {
this.balance -= amt;
}
}
}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 외부데이터 처리하기2 (vueex5.html ) (0) | 2022.05.31 |
|---|---|
| [Vue] 28. 외부데이터 처리하기 (vueex4.html ) (0) | 2022.05.31 |
| [Vue] 28. 이벤트 처리하기 (vueex2.html ) (0) | 2022.05.31 |
| [Vue] 28. vue의 라이프사이클 (vueex1.html ) (0) | 2022.05.31 |
| [Vue] 28. 데이터입력하고 검색하기 (vueex7.html ) (0) | 2022.05.31 |