VueJS覚書 その2「 フィルターについて」

vue2

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

基本的なフィルター

    #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'
        }
    });

A1F72D9396C844C9A7E1E8F35B8476DB

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  }
            ]
        }
    });

6FB6518A52036D6925F644C2A673BE3F

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' -1orderBy 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  }
            ]
        }
    });