Vue.js入門【JavasScript式とフィルタの使い方】

Mustache構文内でのJavaScript式の使い方

Vue.jsでは、{{}}（Mustache構文）を用いて変数を展開することができます。
そして、Mustache構文の中にはJavaScriptの式を記述することができます。

（例1）単一式：messageの値を反転した文字列を表示。

{{ message.split('').reverse().join('') }}

（例2）計算式：number（数値）に1を足して表示。

{{ number + 1 }}

（例3）三項演算子：okの値がtrueの場合、「YES」を表示。trueでない場合は「NO」を表示

{{ ok ? 'YES' : 'NO' }}

フィルタの使い方

ローカルフィルタ

Vue.jsでは{{ 式 | フィルタ }}という形式で記述することで、フィルタを適用することができます。

フィルタとは、テキストにフォーマットを適用する処理のようなものです。例えば、小文字を大文字に変更したりする処理です。

以下の例では、文字列の先頭を大文字に変更するフィルタを定義しています。

new Vue({
  el: '#app',
  data: {
    name: 'taro'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

<div id="app">
    <input type="text" v-model="name">
    <p>
        {{ name | capitalize }}
    </P>
</div>

フィルタを複数適用する

フィルタは複数適用可能です。
フィルタを複数適用するには以下のように記述します。

{{ 式 | フィルタ1 | フィルタ2 | フィルタ3・・・・ }}

フィルタを複数適用する例をみてみましょう。
以下の例では、nameの先頭一文字を大文字に変換するフィルタと末尾に指定した文字列を追加するフィルタを適用しています。

フィルタには引数を指定することもできます。
フィルタの第一引数にはフィルタを適用している元の値が渡ってきて、第二引数にはフィルタ適用時に指定した引数が渡ってきます。

つまり、addSuffix(‘Taro’, ‘様’)という形で呼び出されます。

new Vue({
  el: '#app',
  data: {
    name: 'taro'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    addSuffix: function (value, suffix) {
      return value + suffix
    }
  }
})

<div id="app">
    <input type="text" v-model="name">
    <p>
        {{ name | capitalize | addSuffix('様') }}
    </p>
</div>

グローバルフィルタ

グローバルフィルタはVueインスタンスの作成より前に記述します。

Vue.filter(フィルタ名, フィルタの処理)

Vue.filter('capitalize',function(value){
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  el: '#app',
  data: {
    name: 'taro'
  }
})