본문 바로가기
Front-End/Vue

[장기효(캡틴판교) - Vue.js 시작하기] 8. computed, watch 속성

by hongdor 2021. 1. 25.
728x90

출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js

 

 

8. computed, watch 속성

 

 공통점 : 둘다 함수 내부 변수가 변할 경우 메소드가 동작한다.

 공식문서에 의하면 computed는 데이터 조작에 watch보다 특화되어 더 간결하게 작성할 수 있다.

 무거운 내용은 watch에 구현

 

 

(1) watch 사용 : 복잡 

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

 

 

(2) computed 사용 : 간단

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

 

 

- computed의 예제

  > isError 데이터 값에 따른 텍스트 색상 변화

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warning{
            color: red;
        }
    </style>
</head>
<body>    
    <div id="app">
        <!-- <p v-bind:class="cname">Hello</p> -->
        <!-- isError에 따라 warning 또는 빈값이 된다.-->
        <!-- <p v-bind:class="{ warning: isError}">Hello</p> -->
        <p v-bind:class="errorTextColor">Hello</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: { 
                //cname: 'blue-text',
                isError: false
            },
            computed:{
                errorTextColor: function(){
                    // if(isError){
                    //     return 'warning'
                    // } else{
                    //     return null;
                    // } 아래와 동일
                    return this.isError ? 'warning' : null;
                }
            }
        })
    </script>
</body>
</html>
728x90

댓글0