体で覚えるVue.js - フィルター編 〜 JSおくのほそ道 #026
こんにちは、ほそ道です。
今回も引き続きVue.jsのフィルタを体で覚えます。
フィルタを使う事でバインドするデータに様々な加工を行う事ができます。
前回まで同様、シンプルなサンプルに沢山触れる事でどんな道具があるのかをバンバン体験していくスタイルでやってまいります。
ViewModel生成編
ディレクティブ編
インスタンスメンバ編
グローバルメソッド編
フィルター編
v-repeatネスト編
全体の目次はこちら
capitalize / uppercase / lowercase
capitalizeは先頭文字が小文字の場合に大文字にする。
uppercaseとlowercaseは言わずもがなの大文字化・小文字化。
<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
数値を貨幣で表現する
<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がつく。
引数が複数の場合、引数の個数を超えると最後の値が適用され続ける。
<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と併せて使う必要がある。
<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で入れ子構造に対応させるのをやります。
Author And Source
この問題について(体で覚えるVue.js - フィルター編 〜 JSおくのほそ道 #026), 我々は、より多くの情報をここで見つけました https://qiita.com/hosomichi/items/e37c47d3f22e5738eb84著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .