Vue.jsの算出プロパティcomputed

Vue.jsの算出プロパティcomputed

Vue.jsのmethodsプロパティと似ているプロパティでcomputedというプロパティがあります。算出プロパティと呼ばれているようです。

computed: {
empname: function() {
switch (this.empid) {
case '1':
this.name = 'takahashi';
break;
case '2':
this.name = 'higashiguchi';
break;
case '3':
this.name = 'taniguchi';
break;
default:
this.name = '';
break;
}
return this.name + ':' + this.empid;
}
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

上記ではempnameが算出プロパティ名です。評価されるときに実行されるのがコロンの後に定義している関数です。(switch文で分岐しているだけです)

この算出プロパティ名はmustache(マスタッシュ)に書くことができるので{{empname}}というように書くことができます!

また公式サイトによりますと

算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。

だそうです。要するにnameかempidが変更された場合のみ再評価される、という感じです。

変更されなければキャッシュされます。この点がmethodsプロパティとの違いで、算出プロパティと同様のことはmethodsプロパティでも実現可能ですが、キャッシュされるされないが大きな違いです。

実際は算出プロパティを使うことが多いようです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
従業員番号:<input type="text" v-model="empid" placeholder="1,2,3のどれか"><br>
{{empname}}<br>
</div>
<script src="https://jp.vuejs.org/js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
empid: ''
},
computed: {
empname: function() {
console.log(this.empid);
switch (this.empid) {
case '1':
this.name = 'takahashi';
break;
case '2':
this.name = 'higashiguchi';
break;
case '3':
this.name = 'taniguchi';
break;
default:
this.name = '';
break;
}
return this.name + ':' + this.empid;
}
}
});
</script>
</body>
</html>

view raw
gistfile1.txt
hosted with ❤ by GitHub

実行するとこんな感じです。

Vue.jsの算出プロパティcomputed

Vue.jsの算出プロパティcomputed

次回はv-showディレクティブについて勉強してみます!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA