Vue.js
계산 된 속성

비고

기본 예제

주형

<div id="example">
  a={{ a }}, b={{ b }}
</div>

자바 스크립트

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // a computed getter
    b: function () {
      // `this` points to the vm instance
      return this.a + 1
    }
  }
})

결과

a=1, b=2

여기에서 우리는 계산 된 속성을 선언했습니다. b . 우리가 제공 한 함수는 vm.b 속성에 대한 getter 함수로 사용됩니다.

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

의 값 vm.b 항상의 값에 따라 달라집니다 vm.a .

일반 속성처럼 템플릿의 계산 된 속성에 데이터 바인딩 할 수 있습니다. 뷰는 것을 알고 vm.b 에 따라 달라 vm.a , 그래서에 따라 어떤 바인딩 업데이트합니다 vm.b 때 vm.a 변경.

계산 된 속성 대 시계

주형

<div id="demo">{{fullName}}</div>

시계보기

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
})

계산 된 예

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

계산 된 세터

계산 된 속성은 변경 사항에 따라 달라지는 데이터가있을 때마다 자동으로 다시 계산됩니다. 그러나 계산 된 속성을 수동으로 변경해야하는 경우 Vue에서는 다음과 같이 setter 메서드를 만들 수 있습니다.

템플릿 (위의 기본 예제에서) :

<div id="example">
  a={{ a }}, b={{ b }}
</div>

자바 스크립트 :

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    b: {
      // getter
      get: function () {
        return this.a + 1
      },
      // setter
      set: function (newValue) {
        this.a = newValue - 1 
      }
    }
  }

이제 getter 또는 setter를 호출 할 수 있습니다.

console.log(vm.b)       // -> 2
vm.b = 4                // (setter) 
console.log(vm.b)       // -> 4
console.log(vm.a)       // -> 3

vm.b = 4 는 setter를 호출하고 this.a를 3으로 설정합니다. 확장에 따라 vm.b는 4로 평가됩니다.

v-model에 계산 된 setter 사용

계산 된 속성에 v-model 이 필요할 수 있습니다. 일반적으로 v- 모델은 계산 된 속성 값을 업데이트하지 않습니다.

템플릿 :

<div id="demo">
  <div class='inline-block card'>
    <div :class='{onlineMarker: true, online: status, offline: !status}'></div>  
    <p class='user-state'>User is {{ (status) ? 'online' : 'offline' }}</p>
  </div>

  <div class='margin-5'>
    <input type='checkbox' v-model='status'>Toggle status (This will show you as offline to others)
  </div>
</div>

스타일링 :

#demo {
  font-family: Helvetica;
  font-size: 12px;
}
.inline-block > * {
  display: inline-block;
}
.card {
  background: #ddd;
  padding:2px 10px;
  border-radius: 3px;
}
.onlineMarker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.5s ease-out;
}

.online {
  background-color: #3C3;
}

.offline {
  background-color: #aaa;
}

.user-state {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.margin-5 {
  margin: 5px;
}

구성 요소 :

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            }
        }
    }
})

바이올린 여기 라디오 버튼을 클릭하면 전혀 사용하지 않는 것을 볼 수 있습니다. 상태는 여전히 온라인 상태입니다.

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            },
            set (val) {
                this.statusProxy = val            
            }
        }
    }
})

바이올린 이제 체크 박스가 선택 / 선택 해제 될 때 토글이 발생하는 것을 볼 수 있습니다.