Vue.js
計算されたプロパティ
サーチ…
備考
データと計算されたプロパティ
Vue
インスタンスのdata
およびcomputed
プロパティの主なユースケースの違いは、 data
の変更の可能性のある状態または確率に依存します。特定のオブジェクトがどのカテゴリに属するべきかを決めるときには、これらの質問が役に立ちます:
- これは一定の価値ですか? ( データ )
- これは変更する可能性がありますか? ( 計算またはデータ )
- それの価値は他のデータの価値に依存していますか? ( 計算された )
- 使用する前にデータや計算を追加する必要がありますか? ( 計算された )
- 値は特定の状況下でのみ変更されますか? ( データ )
基本的な例
テンプレート
<div id="example">
a={{ a }}, b={{ b }}
</div>
JavaScript
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
ゲッター関数として使用されます。
console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3
値vm.b
常にの値に依存しているvm.a
。
通常のプロパティと同様に、テンプレート内の計算されたプロパティにデータバインドすることができます。 Vueがあることを認識している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ではこれを行うためのセッターメソッドを作成できます。
テンプレート (上記の基本的な例から):
<div id="example">
a={{ a }}, b={{ b }}
</div>
Javascript:
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
はセッターを呼び出し、this.aを3に設定します。拡張子として、vm.bは4と評価されます。
vモデルの計算されたセッターの使用
計算されたプロパティに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
}
}
}
})
fiddleそして、チェックボックスがチェックされているかチェックされていないので、トグルが起こるのを見ることができます。