体で覚えるVue.js - フィルター編 〜 JSおくのほそ道 #026

こんにちは、ほそ道です。

今回も引き続きVue.jsのフィルタを体で覚えます。
フィルタを使う事でバインドするデータに様々な加工を行う事ができます。
前回まで同様、シンプルなサンプルに沢山触れる事でどんな道具があるのかをバンバン体験していくスタイルでやってまいります。

ViewModel生成編
ディレクティブ編
インスタンスメンバ編
グローバルメソッド編
フィルター編
v-repeatネスト編
全体の目次はこちら

capitalize / uppercase / lowercase

capitalizeは先頭文字が小文字の場合に大文字にする。
uppercaseとlowercaseは言わずもがなの大文字化・小文字化。

Vue.jsとVUE.JSとvue.jsがレンダリングされる

<div id="sample">
  <div v-text="foo|capitalize"></div>
  <div v-text="foo|uppercase"></div>
  <div v-text="foo|lowercase"></div>
</div>
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#sample',
    data: {
      foo: 'vue.js'
    }
  });
</script>

currency

数値を貨幣で表現する

$100,000,000.00がレンダリングされる

<div id="sample">
  <div v-text="foo|currency"></div>
</div>
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#sample',
    data: {
      foo: 100000000
    }
  });
</script>

pluralize

数値に応じてpluralizeの後の引数で置換する。
引数が１つの場合は２以上の時の末尾にはsがつく。
引数が複数の場合、引数の個数を超えると最後の値が適用され続ける。

1item/2items/3items/4items/5itemsと1st/2nd/3rd/4th/5thがレンダリングされる

<div id="sample">
  <div v-repeat="foo">{{$value}}{{$value | pluralize item}}</div>
  <div v-repeat="foo">{{$value}}{{$value | pluralize st nd rd th}}</div>
</div>
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#sample',
    data: {
      foo: [1, 2, 3, 4, 5]
    }
  });
</script>

key

キー押下イベントで特定のキーの時のみイベントを発生させる。
キーは数値のキーコードを指定する必要があるがエイリアスとしてenter等が使える。
v-onと併せて使う必要がある。

テキストボックス内で対応するキーが押下されるとキー識別子をコンソールに表示

<input id="sample" v-on="
  keyup:foo|key 65,
  keyup:foo|key enter,
  keyup:foo|key esc,
  keyup:foo|key up,
  keyup:foo|key down,
  keyup:foo|key right,
  keyup:foo|key left,
  keyup:foo|key delete,
  keydown:foo|key tab" >
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#sample',
    methods: {
      foo: function(x) {
        console.log(x.keyIdentifier);
      }
    }
  });
</script>

filterBy

データ | filterBy 検索値 in 項目の書式。
検索値を包含する値がフィルタされる。
検索値はクォート囲みで直接指定する事も可能。
v-repeatと併せて使う必要がある。

nameフィルター

<div id="sample">
  <input v-model="search">
  <div v-repeat="students | filterBy search in name">{{name}}</div>
</div>
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#sample',
    data: {
      students: {
        1: {name: 'Takeshi'},
        2: {name: 'Kenji'},
        3: {name: 'Masayuki'},
        4: {name: 'Naoki'},
        5: {name: 'Toshinori'},
        6: {name: 'Akira'}
      }
    }
  });
</script>

orderBy

orderBy ソートキー リバースフラグの書式で指定。
ソートキーは文字列をモデルから引っ張ってくる事も出来るが、直接指定する場合はクォート囲みしないと機能しない。
リバースフラグはbool値をモデルから引っ張ってくる事も出来るが直接指定する場合は-1とする。
v-repeatと併せて使う必要がある。

名前逆順ソート

<div id="sample">
  <div v-repeat="students | orderBy 'name' -1">{{name}}</div>
</div>
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#sample',
    data: {
      students: {
        1: {name: 'Takeshi'},
        2: {name: 'Kenji'},
        3: {name: 'Masayuki'},
        4: {name: 'Naoki'},
        5: {name: 'Toshinori'},
        6: {name: 'Akira'}
      }
    }
  });
</script>

今回は以上です。
次回も引き続きVue.jsでv-repeatで入れ子構造に対応させるのをやります。