728x90
반응형
exam1.html
<!DOCTYPE html>
<!-- /vue1/src/main/webapp/20220530/exam1.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="example">
x: <input type="text" v-model="x"><br>
y: <input type="text" v-model="y"><br>
덧샘결과 : <span>{{sum}}</span>
</div>
<script type="text/javascript">
let vSum = new Vue ({
el : "#example",
data : {
x:1,
y:3
}, // 상단 모델 연결
computed : {
// 더하기 기능
sum : function(){
let x = Number(this.x)
let y = Number(this.y)
if(Number.isNaN(x) || Number.isNaN(y)) return 0;
return x + y ;
}
}
})
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28. vue의 라이프사이클 (vueex1.html ) (0) | 2022.05.31 |
|---|---|
| [Vue] 28. 데이터입력하고 검색하기 (vueex7.html ) (0) | 2022.05.31 |
| [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 |