Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14 - 2
이전 강의
2022.12.30 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14
Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14
Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14 이전강의 2022.12.29 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13 Vue.js 강좌 구글차트로 데이터를 실시간으
ecolumbus.tistory.com
저번 포스팅에 이어 산출 속성 computed의 다양한 기능을 알아본다.
산출 속성을 조합해서 사용하는 방법
그리고 getter와 setter를 이용해 양방향 흐름을 이용해 변수를 동기화하는 기능을 구현보자.
소스
<!DOCTYPE html>
<html xmlns:v_on="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>슬기형과 함께하는 Vue.js</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#app",
data: {
x: 200,
y: 300,
userInt:400
},
methods:{ //내용 무
},
computed: {
getPlusValue: function(){
return this.x + this.y
},
getDouble: function () {
return this.getPlusValue * 2
},
getValue:{
get:function (){return this.userInt / 2},
set:function (val){return this.userInt = val * 2},
}
}
})
}
</script>
</head>
<body>
<h1>Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14 두번째</h1>
<h2></h2>
<div id="app">
<p>1 산출 속성 사용법</p>
<p>{{ x }} 와 {{ y }} 의 덧셈은 {{getPlusValue}}</p>
<p>2 산출 속성 조합</p>
<p>(x + y ) -> getPlusValue * 2 = getDouble 의 값 : {{getDouble}}</p>
<p>3 양방향 흐름과 변수의 동기화 (getter, setter)</p>
data 의 userInt : <input v-model.number="userInt"> {{ userInt }}
</br>
computed 의 getValue : <input v-model.number="getValue"> {{ getValue }}
</div>
</body>
</html>실행
설명
( 2 산출 속성 조합 )
위의 빨간색 [2 산출 속성 조합] 예 getPlusValue * 2 = getDouble 의 값 : 1000에 주목한다.
이전 시간에 Vue.js 인스턴스가 시작되면 data x와 y를 선언 및 값을 초기화 하고, computed에 getPlusValue = x+y 산출속성을 하나 만들었다.
산출 속성 getPlusValue 메서드의 다시 * 2를 해서 getDouble 함수를 만들었다.
이러한 형태로 산출 속성을 다양한 활용이 가능하다.
( 3 양방향 흐름과 변수의 동기화 getter, setter )
산출 속성은 x, y 원래 데이터에 영향을 주지 않는다. x = 100 이런식의 대입이 허용되지 않는다는 뜻이다.
하지만 꼭 필요할 경우 setter나 getter 방식을 이용할 수 있다.
userInt에 값을 getValue.setter를 이용해서 할당했다.
산출 속성 getValue에 getter와 setter 를 구현했으므로, userInt와 getValue가 양방향 흐름을 갖게 되며, 동기화가 된다.
<input v-model.number="userInt"> {{userInt}}
computed: {
getValue:{
get:function (){return this.userInt / 2},
set:function (val){return this.userInt = val * 2},
}실행 - ( 3 양방향 흐름과 변수의 동기화 getter, setter )
다음 시간에는 methods 와 computed의 차이, 인터랙티브 한 필터링, 정렬 기능 구현을 해보도록 한다.
'Web Front 개발공부 > Vue.js' 카테고리의 다른 글
| Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14 (0) | 2022.12.30 |
|---|---|
| Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13 (0) | 2022.12.29 |
| Vue.js 강좌 심화 배열 다루기 조건, 반복 디렉티브 v-if, v-for 12 (0) | 2022.12.28 |
| Vue.js 강좌 조건, 반복 (v-if ,v-for) 11 (0) | 2022.12.28 |
| Vue.js 강좌 파라미터를 전달하여 이벤트 처리 v-on 10 (0) | 2022.12.28 |
댓글