今回はフィルターについてメモメモ。
公式のリファレンスそのままだけど、練習もかねて。

基本的なフィルター

    #myApp
        // 頭だけ大文字
        {{ message | capitalize }}
        br
        // 大文字
        {{ message | uppercase }}
        br
        // 数値を通貨等として扱う
        {{ money | currency '¥' }}
        br
        // JSON形式で値を返す
        {{ $data | json }}

    script.
      var vm = new Vue({
        el: '#myApp',
        data: {
            message: 'Hellow World !!',
            money: '12345'
        }
    });

JSON形式の値を出力するやつなんかはデバッグでよく使うことになりそう。

filterBy と v-model で フィルタリング

インタラクティブなフィルタリングの実装例。
filterByも上手く使えばかなり便利。

#myApp
    input(v-model="keyword")
    ul
        li( v-for="user in users | filterBy keyword")
            {{user.name}} - {{user.age}}

    script.
    var vm = new Vue({
        el: '#myApp',
        data: {
            keyword: '',
            users: [
                {name: 'mogami moga', age: 26},
                {name: 'yumemi nemu', age: 28},
                {name: 'aizawa risa', age: 27 },
                {name: 'furukawa mirin', age: 28 },
                {name: 'naruse eimi', age: 28  },
                {name: 'fujisaki ayane', age: 20  }
            ]
        }
    });

orderBy で並び替え

orderByを使用するとアルファベット順、数字の降順昇順を切り替えることができる。
orderBy 'name'とすることで、名前をアルファベット順に並び替えることが可能。

#myApp
    input(v-model="keyword")
    ul
        li( v-for="user in users | filterBy keyword | orderBy 'name'")
        // orderBy追記
            {{user.name}} - {{user.age}}

// 以下共通

下記のようにorderBy 'age'とすることで年齢を昇順に並び替える事が可能。
ちなみにorderBy 'age' -1とすると、逆の降順になる

#myApp
    input(v-model="keyword")
    ul
        li( v-for="user in users | filterBy keyword | orderBy 'age'")
        // orderBy追記
            {{user.name}} - {{user.age}}

// 以下共通

ordeByに使用する値はdataに持たせていることのほうが多い。
orderBy 'age' -1をorderBy orderkey orderRuleとし、
それぞれの値をdataに格納する。

#myApp
  input(v-model="keyword")
  ul
    li( v-for="user in users | filterBy keyword in 'name' | orderBy orderKey orderRule")
      {{user.name}} - {{user.age}}

  script.
      var vm = new Vue({
        el: '#myApp',
        data: {
            keyword: '',
            orderKey: 'age',
            orderRule: -1,
            users: [
                {name: 'mogami moga', age: 26},
                {name: 'yumemi nemu', age: 28},
                {name: 'aizawa risa', age: 27 },
                {name: 'furukawa mirin', age: 28 },
                {name: 'naruse eimi', age: 28  },
                {name: 'fujisaki ayane', age: 20  }
            ]
        }
    });