Vue.js
계산 된 속성
수색…
비고
데이터와 계산 된 속성
Vue
인스턴스의 data
및 computed
속성의 주요 유스 케이스 차이는 data
변경의 잠재적 상태 또는 확률에 따라 다릅니다. 특정 물체가 어떤 범주에 속해야하는지 결정할 때 다음 질문이 도움이 될 수 있습니다.
- 이것은 일정한 가치입니까? ( 데이터 )
- 이것이 변화 할 가능성이 있습니까? ( 계산 또는 데이터 )
- 그것의 가치는 다른 데이터의 가치에 의존 하는가? ( 계산 된 )
- 사용하기 전에 추가 데이터 또는 계산이 완료되어야합니까? ( 계산 된 )
- 가치는 특정 상황에서만 변경됩니까? ( 데이터 )
기본 예제
주형
<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
}
}
}
})
바이올린 이제 체크 박스가 선택 / 선택 해제 될 때 토글이 발생하는 것을 볼 수 있습니다.