728x90
반응형
vueex2.html
<!DOCTYPE html>
<!--
/vue1/src/main/webapp/20220531/vueex2.html
예금은 음수값을 인정할 수 없음. 잔고만큼만 인출이 가능해야함.
-->
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 처리하기</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" >
</p>
<p>
<!-- @click : click 이벤트 발생시. onclick. v-on : click와 같은 의미 -->
<button id="deposit" v-on:click="balance += parseInt(amount)">예금</button>
<button id="withdraw" @click="balance -= parseInt(amount)">인출</button>
</p>
<h3>계좌잔고 : {{balance}}</h3>
</div>
<script>
let model = {amount:0, balance:0}
let simple = new Vue ({
el : "#simple",
data : model
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 외부데이터 처리하기 (vueex4.html ) (0) | 2022.05.31 |
|---|---|
| [Vue] 28. 이벤트 처리하기2 (vueex3.html ) (0) | 2022.05.31 |
| [Vue] 28. vue의 라이프사이클 (vueex1.html ) (0) | 2022.05.31 |
| [Vue] 28. 데이터입력하고 검색하기 (vueex7.html ) (0) | 2022.05.31 |
| [Vue] 28. 두 수의 합 구하기 (exam1.html ) (0) | 2022.05.30 |