Vue.js の算出プロパティを使ってみた

初めに

前回に引き続きVue.jsで学んだことのアウトプットして投稿します。

算出プロパティ

• 算出プロパティの性質

何度アクセスしても、関数を再び実行することなく以前計算された結果を即時に返す

• メソッドの性質

対称的に、メソッド呼び出しは、再描画が起きると常に関数を実行

例

ここでは入力された文字を一文字ずらして表示するメソッドを算出プロパティで書いてみました。

  <div id="app">
    <input v-model="inputText" type="text">
    {{ nextAlphabet }}
  </div>

var app = new Vue({
  el: '#app',
  data: {
    inputText: ''
  },
  computed: {
    nextAlphabet: function() {
      var alphabet = 'abcdefghijklmnopqrstuvwxyz' +
                     'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
      var alphabetList = alphabet.split('');
      var alphabetShiftList = {};
      for (let i = 0; i < alphabetList.length; i++) {
        alphabetShiftList[alphabetList[i]] = alphabetList[(i + 1) % 52]
      }
      alphabetShiftList[' '] = ' ';
      var applyShitList = this.inputText.split('').map(x => alphabetShiftList[x]);
      return applyShitList.join().replace(/,/g, '');
    }
  }
})

• 動作結果

参考記事

• Vue.js 日本語公式ドキュメント
  https://jp.vuejs.org/v2/guide/computed.html