Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vue.js 2.x その0001 カスタムフィルタ(Custom Filters)を登録する基本サンプル

参考にさせて頂いたページ

ソースコードサンプル1

ソースコードサンプルは以下の通り。

<div id="filter-app">
  <input type="text" v-model="message">
  <div>{{message | reverse}}</div>
<!--/#filter-app--></div>

<script src="js/vue.js"></script>
<script>
Vue.filter('reverse', function (value) {
  console.log(value);
  return value.split('').reverse().join('');
})

var filterApp = new Vue({
  el: '#filter-app',
  data: {
    message: 'message',
  }
});
</script>

ソースコードサンプル1について

まずv-model="message"でdata.messageとバインディングしています。vue.jsのよくある記述です。

{{message | reverse}}は、ただdata.messageの値を出力するのではなく、フィルターを通した結果を出力しています。

newする前に、Vueコンストラクタにfilterを登録しています。
公式サイトにあるように、第一引数はfilterIDを文字列で渡して、第二引数は関数オブジェクトです。
第二引数として渡した関数の引数valueは上記した{{message | reverse}}のmessageが入ってきます。

その後でnewしています。

ソースコードサンプル2

newするときにfiltersプロパティを定義する記述方法は以下の通り。

<div id="filter-app">
  <input type="text" v-model="message">
  <div>{{message | reverse}}</div>
<!--/#filter-app--></div>

<script src="js/vue.js"></script>
<script>
var filterApp = new Vue({
  el: '#filter-app',
  data: {
    message: 'message',
  },
  filters: {
    reverse: function(value) {
      console.log(value);
      return value.split('').reverse().join('');
    }
  }
});
</script>

終わりに

vue.js 1.x まで使えた組み込みのフィルタは使えなくなったので、そのあたりのことは参考にさせて頂いた以下のページに書いてあったりしました。

今回はここまで。