728x90
반응형
vueex4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
<style>
.score{border: solid 1px black;}
.warning {background-color: orange; color: purple;}
.warnimage { width: 25px; height: 25px; top: 5px; position: relative;}
</style>
</head>
<body>
<div id="simple">
<div>
<p>1부터 100까지만 입력가능합니다.</p>
<div>
<!-- v-model: 입력된 값을 vue 객체에 저장
v-model.number: 입력된 값을 vue 객체에 숫자형태로 저장. (number제외 시 문자형태로 들어감)
입력된 값이 1보다 작거나, 100보다 큰 경우 class="warning" 속성 설정
info 함수에서 입력된 숫자로 class 속성을 결정
-->
점수: <input type="text" class="score" v-model.number="score" v-bind:class="info" />
<img src="image/error.png" class="warnimage" v-show="info.warning" />
</div>
</div>
</div>
<script>
let model = { score: 0 };
let simple = new Vue({
el: '#simple',
data: model,
computed: {
info: function(){
if(this.score >= 1 && this.score <= 100)
return {warning: false};
else
return {warning: true};
}
}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 게시판 목록 조회하기 (boardlist.html, SiteMeshFilter.java, AjaxController.java, ShopService.java, BoardDao.java, BoardMapper.java) (0) | 2022.06.03 |
|---|---|
| [Vue] 28. Todo List (vueex5.html ) (0) | 2022.06.02 |
| [Vue] 28. CSS와 연결하기 (vueex3.html ) (0) | 2022.06.02 |
| [Vue] 28. style 설정하기 (vueex2.html ) (0) | 2022.06.02 |
| [Vue] 28. 마우스 이벤트 (vueex1.html) (0) | 2022.06.02 |