VueJS覚書 その2「 フィルターについて」
/ 2016.04.04 /
WEB /
今回はフィルターについてメモメモ。
公式のリファレンスそのままだけど、練習もかねて。
基本的なフィルター
#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 }
]
}
});