728x90
1. computed : 데이터의 값을 계산하여 쓸 때 사용하는 산출 프로퍼티
예시로 바로 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>금액을 입력하면 소비세가 포함된 금액을 계산하는 예제</h2>
<div id="app">
<input v-model.number="price" type="number">원
<p>소비세 포함 금액 {{ taxIncluded }} 원</p>
</div>
<script>
new Vue({
el: '#app',
data: {
price: 100
},
computed:{
taxIncluded: function(){
return this.price * 1.08;
}
}
})
</script>
</body>
</html>taxIncluded라는 프로퍼티에 계산하는 function을 넣어 반환하는 예시입니다.
아래와 같은 출력 값을 확인할 수 있습니다.
◎ 단가와 개수를 입력해 세금 포함 금액을 계산하는 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>단가와 개수를 입력하면 세금포함 금액을 계산하는 예제</h2>
<div id="app">
<input v-model.number="price" type="number">원 x
<input v-model.number="count" type="number">개
<p> 합계 {{ sum }} 원</p>
<p>세금포함 {{ taxIncluded }} 원</p>
</div>
<script>
new Vue({
el: '#app',
data: {
price: 100,
count: 1
},
computed:{
sum: function(){
return this.price * this.count;
},
taxIncluded: function(){
return this.sum * 1.08;
}
}
})
</script>
</body>
</html>sum 함수를 따로 지정하고 그 함수는 다른 함수에서 사용할 수 있습니다.
alt + 255 하면 ' ' 값이 들어가는 빈 공간을 하나 생성할 수 있습니다.
◎ 국, 영, 수 값을 입력받으면 합과 평균을 출력하는 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>단가와 개수를 입력하면 세금포함 금액을 계산하는 예제</h2>
<div id="app">
<input v-model.number="kor" type="number">점<br>
<input v-model.number="eng" type="number">점<br>
<input v-model.number="math" type="number">점<br>
<p> 총점 {{ sum }} 점</p>
<p>평균 점수 {{ avg }} 점</p>
</div>
<script>
new Vue({
el: '#app',
data: {
kor: 0,
eng: 0,
math: 0
},
computed:{
sum: function(){
return this.kor + this.eng + this.math;
},
avg: function(){
return this.sum/3;
}
}
})
</script>
</body>
</html>위의 예제와 유사한 문제이므로 별도의 코멘트는 추가하지 않겠습니다.
◎ 문장을 입력하면 남은 글자수를 표시하는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>문장을 입력하면 남은 글자수를 표시하는 예제</h2>
<div id="app">
<p>감상은 140자 이내로 입력해 주세요.</p>
<textarea v-model="myText"></textarea>
<p v-bind:style="{color:computedColor}">남은 글자는 {{ remaining }} 입니다.</p>
</div>
<script>
new Vue({
el:'#app',
data:{
myText:'오늘은 날씨가 좋습니다.'
},
computed:{
remaining: function(){
return 140 - this.myText.length;
},
computedColor: function(){
col = 'green';
if(this.remaining < 20){
col = 'orange';
}
if(this.remaining < 1){
col = 'red';
}
return col;
}
}
})
</script>
</body>
</html>남은 글자수가 20자 미만이면 orange, 1자 미만이면 red로 표시되도록 설정했습니다.
v-bind:style="{color:computedColor}"에서 computedColor을 색이 변하는 함수로 지정했습니다.
<textarea v-model="myText" maxlength="140" resize: none></textarea>
위는 maxlength를 통해 140자를 초과하면 더 이상 입력이 되지 않도록 할 수 있습니다.
resize: none을 통해 textarea의 크기가 변하지 않도록 합니다.
◎ 글자를 입력하면 배열 안의 글자와 매칭해 유사한 글자만 출력하는 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>문자를 입력하면 그 문자를 표함한 항목만 표시하는 예제 </h2>
<div id="app">
<input v-model="findWord">
<ul>
<li v-for="item in findItems">{{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
findWord: '',
items: ['설악산', '한라산', '북한산', '백두산', '지리산']
},
computed:{
findItems: function(){
if(this.findWord){
return this.items.filter(function(value){
return (value.indexOf(this.findWord) > -1);
}, this);
} else{
return this.items
}
}
}
})
</script>
</body>
</html>이 예제는 filter를 이용한 예제입니다. 하지만 좀 어려워서 하나씩 다뤄보도록 하겠습니다.
1. input에 findWord라는 변수를 연결합니다.
2. findItem이라는 함수를 지정해 filter 기능을 사용합니다.
▷ findWord라는 변수에 글자가 없으면 items의 배열이 모두 출력되도록 합니다.(글자가 없으면 0 즉, false가 됩니다.)
▷만약 변수에 글자가 있으면 this.findWord는 true가 되면서 필터의 기능이 사용됩니다.
▶ items에 있는 배열을 받아와 필터를 적용하고 이 값들은 하나씩 value로 받을 수 있습니다.
▶ 그리고 value의 값을 indexOf를 통해 제가 입력한 글자와 비교합니다.
▶ 입력한 글자와 매칭되는 값이 있으면 0 이상이 출력되고, 없으면 -1이 출력됩니다.
▶ 그렇게 입력받은 값을 return을 통해 filter로 전달하고 this를 통해 findItems에 배열로 저장합니다.
▶ return을 2번 사용한 이유는 비교한 글자 값을 필터로 넘길 때, 필터의 글자를 함수에 넘길 때 필요합니다.
위의 필터라는 함수는 자바스크립트에서 복잡하게 사용되며 자바에서는 DB를 통해 간단하게 나타낼 수 있다고 합니다. 그래도 이 필터라는 함수를 잘 사용하면 유용할 것 같습니다.
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 1) (2) | 2022.12.27 |
|---|---|
| [java script] Vue.js 데이터를 사용한 계산 2 (computed) (0) | 2022.12.27 |
| [java script] Vue.js의 구글 차트란? (0) | 2022.12.26 |
| [java script] Vue.js 조건(v-if)과 반복(v-for) 3 (0) | 2022.12.26 |
| [java script] Vue.js 조건(v-if)과 반복(v-for) 2 (0) | 2022.12.26 |
