参考にさせて頂いたページ
ソースコードサンプル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 まで使えた組み込みのフィルタは使えなくなったので、そのあたりのことは参考にさせて頂いた以下のページに書いてあったりしました。
今回はここまで。