728x90
반응형
vueex3.html
<!DOCTYPE html>
<!-- /vue1/src/main/webapp/20220530/vueex3.html -->
<html>
<head>
<meta charset="UTF-8">
<title>v-if : 조건 디렉티브</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="account">
<!-- v-model : 입력된 값을 amount 데이터에 저장 -->
예금액 : <input type="text" v-model="amount" >
<!--
v-show : amount < 0 결과가 True인 경우 img를 보여줌. 이미지를 로드하고, 결과가 True인 경우만 보여줌.
v-if : amount < 0 결과가 True인 경우 img를 로드함.
-->
<img v-show="amount < 0" src="http://sample.bmaster.kro.kr/img/error.png"
title="마이너스는 허용하지 않습니다." style="width:15px; height:15px; vertical-align:middle" />
<span v-if="amount >= 1000000">Gold</span>
<span v-else-if="amount >= 500000">Silver</span>
<span v-else-if="amount >= 200000">Bronze</span>
<span v-else>Basic</span>
</div>
<script type="text/javascript">
let simple = new Vue ({
el : "#account",
data : {amount : 0}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28.computed : 함수를 데이터로 사용 (vueex6.html ) (0) | 2022.05.30 |
|---|---|
| [Vue] 28. v-for 예제2 (vueex5.html ) (0) | 2022.05.30 |
| [Vue] 28. v-for 예제 (vueex4.html ) (0) | 2022.05.30 |
| [Vue] 28. v-model 예제 (vueex2.html ) (0) | 2022.05.30 |
| [Vue] 28. vue 예제1 (vueex1.html ) (0) | 2022.05.30 |