【Vue.jsプログラミング入門講座】テンプレート構文：変数の記述方法いろいろ（パート２）

前回の記事「【Vue.jsプログラミング入門講座】テンプレート構文：変数の記述方法いろいろ」では、Vue.jsの基本的な変数の記述方法について説明しました。
今回は、変数でこんな書き方もできるぞというモノを紹介します。
テンプレートの記述方法は、別記事「【Vue.jsプログラミング入門講座】Vue.jsのテンプレートの記述方法いろいろ」をご覧ください。

数字の計算

Mustache記法の変数内で計算することもできます。

＜サンプルソース＞

<div id="app">
  {{ number + 1 }}
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      number: 2
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

3

上記の場合、numberの値が2で、Mustache記法のタグ内で1を加算しているため、画面には計算結果の3が表示されます。

JavaScript式

Mustache記法の変数内にJavaScriptの関数（組み込み関数）も記述することができます。

＜サンプルソース＞

<div id="app">
  {{ message.split('').reverse().join(',') }}
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'abcde'
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

e,d,c,b,a

上記では、messageの値「abcde」が、split('')で1文字ずつに分割されて配列に格納され、reverse()で配列が逆順になり、join(',')でカンマ区切りで結合されるため、画面には「e,d,c,b,a」と表示されます。

フィルター

フィルターを使うと変数の値を関数で加工してから表示することができます。
（余談ですが、フィルターはVue 3では廃止される予定です。）

＜サンプルソース＞

<div id="app">
  金額は{{ price | number_format }}円です。
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
      el: '#app',
    data: {
      price: 100000000
    },
    filters: {
      number_format: function(number) {
        if(isNaN(number)) {
          return 0
        }
        //toLocaleString() メソッドは、この数値を表す言語依存の文字列を返します。
        return number.toLocaleString()
      }
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

金額は100,000,000円です。

Mustache記法の「|」よりも前の変数が、「|」より後ろの自作関数number_formatで処理されてから、画面に表示されます。
number_format関数は、数字を3桁区切りにする関数なので、
上記の表示結果は、「100,000,000」になります。

今回は以上です。