Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14

이전강의

2022.12.29 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13

Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13

Vue.js 강좌 구글차트로 데이터를 실시간으로 표현 13 이전 강의 2022.12.28 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 심화 배열 다루기 조건, 반복 디렉티브 v-if, v-for 12 Vue.js 강좌 심화 배열 다루기 조건,

ecolumbus.tistory.com

산출 속성이(computed)란, 어떤 처리를 포함하는 데이터를 의미한다.

예제로 산출 속성 사용법을 익혀본다.

소스

<!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
                },
                methods:{ //내용 무
                     },
                computed: {
                    getPlusValue: function(){
                        return this.x + this.y
                    }
                }
            })
        }
    </script>
</head>
<body>
<h1>Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14</h1>
<h2></h2>
<div id="app">
    <p>1 산출 속성을 조합해 사용한 예</p>
    <p>{{ x }} 와 {{ y }} 의 덧셈은 {{getPlusValue}}</p>
</div>
</body>
</html>

실행

설명

data에 x와 y라는 변수를 선언했다.

산출 속성은 임의의 데이터를 리턴하는 함수를 computed 옵션에 정의한다.

getPlusValue() 함수는 x + y를 수식한다. 200(x) + 300(y) = 500(getPlusValue)

computed에 정의한 함수는 Vue 인스턴스 초기화 때 내부에서 Object.defineProperty 함수가 사용되고 Vue의 인스턴스 속성으로 정의/등록된다. 그러므로 this.getPlusValue 형태로도 사용 가능하다.

다음 포스팅에서는 산출 속성의 다양한 활용 방법과 상세하게 알아본다.

저작자표시 비영리 변경금지

'Web Front 개발공부 > Vue.js' 카테고리의 다른 글

Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14 - 2 (0)	2022.12.31
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

슬기로운 개발자 생활

Vue.js 강좌 데이터 감시 및 가공 - 산출속성(computed) 14