はじめに
vue.jsの算出プロパティ（computed）を利用して、内部クラスっぽいものを作るという
裏技的な利用例を紹介します
例
以下の例は、身長・体重の値から、BMIと血液量を算出し、表示するプログラムです。
算出プロパティは一般的に値やプレーンオブジェクトを返り値としますが
ここでは health の返り値を 関数を含んだオブジェクト にしています。
<body>
<div id="app">
<ul>
<li>身長 : {{height}} cm</li>
<li>体重 : {{weight}} kg</li>
<li>BMI : {{health.getBmi()}}</li>
<li>血液量 : {{health.getBloodVolume()}} kg</li>
</ul>
</div>
<script>
var vueOption = {
el : '#app',
data : {
height : 165, // 身長（cm）
weight : 63 // 体重（kg）
},
computed : {
// 詳細情報算出クラス
health : function(){
var _this = this;
return {
// BMIを算出
getBmi : function(){
var h = _this.height / 100;
return _this.weight / ( h * h );
},
// 血液量を算出
getBloodVolume : function(){
return _this.weight / 13;
}
}
}
},
};
var app = new Vue(vueOption);
</script>
</body>
実行結果
テンプレート上で {{health.getBmi()}} {{health.getBloodVolume()}} と記載した部分に
計算結果が出力される
使い道あるの？
現時点では思いつかないです
- 複数のメソッドをある名前空間(health)の元に記載したい
- 一部の関数をあるオブジェクト(health)の元にネストさせたい
- vueオブジェクト内でメソッドチェーンを作りたい
- （コンポーネントシステムを使わない場合）肥大化しがちなメソッドを分割して管理したい
（ちなみに、methods はこのような使い方はできないです）
おわりに
もし有用な使い方を見つけたら教えてください
「いいね」していただけると嬉しいです！