Vue.jsで算出プロパティを使う

Vue.js

算出プロパティは既存のプロパティを演算した結果を取得するためのゲッター。 定義済の算出プロパティをテンプレートから参照するには{{ プロパティ名 }}とする。

compute.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <p>{{ localEmail }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/compute.js"></script>
</body>
</html>

compute.js

new Vue({
  el: '#app',
  data: {
    email: 'T7-SUzuki@example.com'
  },
  computed: {
    localEmail: function() {
      return this.email.split('@')[0].toLowerCase();
    }
  }
})

算出プロパティは以下の特徴を持つ。

  • 引数を持てない
  • 用途は加工を伴う取得
  • 算出プロパティの値はキャッシュされる