お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編）

LINEフロントエンドレンジャーのWeb開発術第1回

2015/01/14 14:00

ポスト

フィルター

　フィルターは渡した値に対して特定の処理を挟むことができる仕組みです。ビルトインのフィルターの代表的なものを以下に紹介します。

表3. 代表的なビルトインのフィルター
フィルター	説明
lowercase	小文字に変換する（‘ABC’ => ‘abc’）
uppercase	大文字に変換する（‘abc’ => ‘ABC’）
currency	貨幣表記に変換する（12345 => $12,345.00）
json	オブジェクトをjson文字列に変換する
filterBy	v-repeatで指定した条件によるフィルターをする
orderBy	v-repeatで指定した並び順に更更する

リスト13. フィルターの利用例

<!-- 文字を小文字にする -->
<span v-text="message | lowercase"></span>
<!-- Mustache記法でフィルターを適用する -->
<span>{{message | uppercase}}</span>
<!-- 貨幣単位表示の引数（\）をフィルターに渡す （例: 100 => \100.00） -->
<span>{{price | currency \ }}</span>
<!-- v-repeatで指定するリストに対してnameプロパティの逆順（-1）で表示する例 -->
<li v-repeat="users | orderBy 'name' -1">{{name}}</li>

Vue.jsの基本機能を組み合わせたコード例

　これまで紹介したいくつかの機能を組み合わせて、Vue.jsを使って簡易的なアプリケーションを実装する例を紹介します。

　この簡易アプリケーションは大雑把に以下のような機能を持ちます。

ユーザー情報のリストを表示する（v-repeat）
inputに指定した文字でリストをフィルターする（v-model、フィルター）
リストの一つの項目をクリックすると詳細を表示する（v-on, v-show）

　以下にコード例を示します。

リスト14. 基本機能を組み合わせたコード例

<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://vuejs.org/js/vue.min.js"></script>
        <style>
            .Selected {
                background-color: #a8d1ff;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="searchText">
            <hr>
            <!-- usersのリストをseachTextでフィルターし、選択されたユーザーはSelectedクラスを適用する。 -->   
            <div v-repeat="users | filterBy searchText in name" v-on="click: onClickUser(this)" v-class="Selected: this == selectedUser">
                {{name}}
            </div>
            <hr>
            <!-- 選択されたユーザーがいる場合は名前とコメントを表示 -->
            <div v-show="selectedUser">
                <div>名前: {{selectedUser.name}}</div>
                <div>コメント: {{selectedUser.comment}}</div>
            </div>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    searchText: "",
                    users: [],
                    selectedUser: null
                },
                created: function(){
                    // ユーザーデータを追加する
                    this.users.push({name: "Takuya Tejima", comment: "次回の連載に乞うご期待。"});
                    this.users.push({name: "Daisuke Shimizu", comment: "こんにちは。"});
                    this.users.push({name: "Ryota Agata", comment: "Vue.js嫌い。"});
                },
                methods: {
                    onClickUser: function(user){
                        // クリックされたユーザーデータをselectedUserにセットする
                        this.selectedUser = user;
                    }
                }
            });
        </script>
    </body>
</html>

　上記のコードを実行すると、まず3名のユーザーのリストが表示されます。フィルター用のinputに「ta」と入力するとユーザーが絞り込まれ、1人のユーザーをクリックするとそのユーザーの名前とコメントが表示されます。

図2. 基本機能を組み合わせたコードの実行例