基礎からメモ： Vue.js CH4-p134 フィルタでテキストの変換処理

Vue.js

フィルタでテキストの変換処理ができる。 フィルタはローカルまたはグローバルに登録して使用する。ただしthisへのアクセスはできない。

フィルタの使い方

Mastacheまたはv-bindの値にパイプ（|）でつなげて使う。filterメソッドの第一引数にdataが渡される。

{{ 対象データ | フィルタ名 }}
<div v-bind:id=”対象データ | フィルタ名”> </div>

フィルターはコンポーネントのfiltersオプションに登録することで、特定のコンポーネントの中でのみ使えるようになる。 data.priceの数値を日本円に替えて表示する簡単なフィルターの例。

<div id="app">
    <p>{{ price | localNum }}円</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    price: 19800
  },
  filters: {
    localNum: function(val) {
      return val.toLocaleString();
    }
  }
})

グローバルに登録されたフィルタ

グローバルメソッドVue.filterで登録すると、全てのコンポーネントから使用できるグローバルフィルタになる。

Vue.filter('localNum': function(val) {
  return val.toLocaleString();
})

フィルタに引数を渡す

<p>{{ message | filterA("Vue") }}</p>
<p>{{ message | filterB("Vue", 100) }}</p>

第一引数はフィルター対象のデータ、第二引数以降に（）内に書かれた引数が渡される。

filterA: function(message, foo) {
  console.log(message, foo); // -> Hello! Vue
},
filterB: function(message, bar, num) {
  console.log(message, bar, num); // -> Hello! Vue 100
}

methodオプションに登録したメソッドとの違いは、thisへのアクセスの可不可と、記述方法の違いだけ。ただフィルタを用意することでHTML側の記述がすっきりする。

複数のフィルタをパイプでつなぐ

<p>180度は {{ 180 | radian | round }} ラジアン</p>

round: function(val) {
  // 小数点以下第2位に丸める
  return Math.round(val * 100) / 100;
},
radian: function(val) {
  // 度からラジアンに変換する
  return val * Math.PI / 180;
}

[結果表示]

180度は 3.14 ラジアン