728x90
반응형
vueex6.html
<!DOCTYPE html>
<!-- /vue1/src/main/webapp/20220530/vueex6.html -->
<html>
<head>
<meta charset="UTF-8">
<title>computed : 함수를 데이터로 사용</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="num"><br>
1부터 입력된 수까지의 합 : <span>{{sum}}</span>
</div>
<script type="text/javascript">
let vSum = new Vue ({
el : "#example",
data : {num : 0},
computed : { //계산형 속성
sum : function(){
//Number : 자바스크립트의 숫자형 객체
// this : Vue의 데이터. 문자열형이 기본임.
let n = Number(this.num)
//isNaN : 숫자가 아닌경우 True
if(Number.isNaN(n) || n < 1) return 0;
return ((1+n) * n) / 2; //숫자까지의 합 공식
}
}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. 데이터입력하고 검색하기 (vueex7.html ) (0) | 2022.05.31 |
|---|---|
| [Vue] 28. 두 수의 합 구하기 (exam1.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-if : 조건 디렉티브 (vueex3.html ) (0) | 2022.05.30 |