◀ 7.

【Vue.js】computed(算出プロパティ)と使い方とdataとの違い

▶
編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

computedとは

computedはdataと違い、関数を用いて値を定義することが出来ます。

※dataに関してはこちらを参照。

 

実装例

html

<div id="app">

  <input v-model="value">

  <p>value is: <b>{{ value }}</b></p>

  <p>computed_value is: <b>{{ computedValue }}</b></p>

</div>

※valueとcomputedValueは変数名なので実際はなんでもいいです。

 

js

var app = new Vue({

  el: '#app',

  data: {

    value: 'init value',

  },

  computed: {

    computedValue: function() {

      return "computed " + this.value;

    },

  },

})

上記の様にcomputedでは変数を関数で定義することができます。

今回は data の値に対して「computed 」という文字列を追加します。

 

出力結果

以下、初期表示です。

 

appleと入力すると以下の様になります。

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
子ページ
子ページはありません
同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. on:click クリック時のイベント処理
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法

人気ページ

最近更新/作成されたページ