算出プロパティ
算出プロパティcomputedとは
算出プロパティは、関数によって算出したデータを返すことができるプロパティです。
基本の使い方
computedを使うと、マスタッシュ構文の中でメソッドを続けて書いた時と同じように、
messageの文字列を反転させて表示することができます。
index.html
<div id="app">
<p>
{{message.split('').reverse().join('')}}
</p>
<p>
{{reversedMessage}}
</p>
</div>
index.js
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue.js!!'
},
computed: {
reversedMessage: function(){
return this.message.split('').reverse().join('')
}
}
})
ブラウザ
computedとmethodsの比較
・computedはメソッドでなくプロパティなので、( ) をつける必要はありません。methodsはメソッドなので、( ) をつける必要があります。
・computesはgetter、setterを定義することができますが、methodsはgetterのみです。
・computedはキャッシュされますが、methodsはされません。
getterとsetter
computedでは、getterだけではなく、setterも定義することができます。
例
index.thml
<div id="app">
<p>
税抜き価格：<input type="text" v-model="basePrice">
</p>
<p>
税込価格：<input type="text" v-model="taxIncludedPrice">
</p>
</div>
index.js
var app = new Vue({
el: '#app',
data: {
basePrice: 100
},
computed: {
taxIncludedPrice: {
get: function() {
return parseInt(this.basePrice*1.08)
},
set: function(taxIncludedPrice) {
this.basePrice = Math.ceil(taxIncludedPrice/1.08)
}
}
}
})
ブラウザ
アプリ
キャッシュ
computedに関しては、プロパティは依存関係に基づきキャッシュされます。
例
index.html
<div id="app">
<h2>
Computed
</h2>
<ol>
<li>{{computedNumber}}</li>
<li>{{computedNumber}}</li>
<li>{{computedNumber}}</li>
</ol>
<h2>
Methods
</h2>
<ol>
<li>{{methodsNumber()}}</li>
<li>{{methodsNumber()}}</li>
<li>{{methodsNumber()}}</li>
</ol>
</div>
index.js
var app = new Vue({
el: '#app',
computed: {
computedNumber: function(){
return Math.random()
}
},
methods: {
methodsNumber: function() {
return Math.random()
}
}
})
ブラウザ
