前置き
テキストの変換処理ができるfilter🌟
computedやmethodsでも
同じことはできますが毎回作るのは面倒。
そんな時に便利なfilterです♪
今回は基本的な使い方と、
代表的な使用例をやっていきます🍒
・使い方：ローカルver
・使い方：グローバルver
・使用例：代表的な数字3桁ごとにカンマ
・使用例：絞り込み検索
【覚えること】
・基礎文法
・引数に必ずvalueがくる
使い方：ローカルver
テキストを全て大文字にします💡
【基礎文法】
該当ファイルのexport default内
) pages
|
1 2 3 4 5 6 7 8 9 |
<script> export default { filters: { フィルタ名(value) { // 処理 } }, } </script> |
{{ }} Mustache構文内に
filter名をパイプ記号( | )で繋げる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div class="page"> // filter名toUppercaseを|で繋げる <p>{{ text | toUppercase }}</p> </div> </template> <script> export default { data () { return { text: 'Hello Nuxt.js!', } }, filters: { toUppercase(value) { return value.toUpperCase(); } }, } </script> <style lang="scss" scoped> </style> |
使い方：グローバルver
テキストを全て小文字にします💡
【基礎文法】
jsファイル内に記載
|
1 2 3 |
Vue.filter('フィルタ名', function(value) { //処理 }); |
) file
|
1 2 3 4 5 |
import Vue from 'vue' Vue.filter('toLowercase', function (value) { return value.toLowerCase(); }) |
|
1 2 3 4 5 |
export default { plugins: [ '~/plugins/filter.js' ], } |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div class="page"> <p>{{ text | toLowercase }}</p> </div> </template> <script> export default { data () { return { text: 'HELLO NUXT.JS!', } }, } </script> <style lang="scss" scoped> </style> |
✴️ちなみに連結して繋げるのもOK！
textが大文字小文字があっても…
・toUppercase()で全て大文字に変換
・toLowercaseで全て小文字に変換
最終的に全て小文字になります〜！
|
1 |
{{ text | toUppercase | toLowercase }} |
使用例：数字の3桁ごとにカンマ
filterの代表的な使用例ですね。
ついでにランダムで整数を表示させます。
乱数は10桁以上の数値にしました🌟
toLocaleString()関数が簡単🤗
) file
|
1 2 3 4 5 |
import Vue from 'vue' Vue.filter('addComma', function (value) { return value.toLocaleString(); }) |
|
1 2 3 4 5 |
export default { plugins: [ '~/plugins/filter.js' ], } |
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div class="page"> {{ number | addComma }} </div> </template> <script> export default { data () { var min = 1000000000; var max = 10000000000; var number = Math.max(Math.floor(Math.random() * max) + 1, min); console.log(number); return { number, } }, } </script> <style lang="scss" scoped> </style> |
正規表現でやる場合🤗
filer.jsを書き換えます！
|
1 2 3 4 5 |
// 変更前 return value.toLocaleString(); // 変更後 return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,'); |
・toString()関数
数値を文字列と認識して桁数を把握。
・replace()関数
文字列を()内の正規表現に置き換え。
・/(\d)(?=(\d{3})+$)/g, '$1,'
構造は…
/(fuga)(?=(hoge))/
こちらの記事で解説されております！
https://qiita.com/ariyo13/items/ab410a84c74b23099648
使用例：絞り込み検索
) pages
データ更新の必要がないため
methodsではなくcomputedに記載します🌟
v-modelを使って表示させるため
{{ }} Mustache構文内に
filter名を繋げる必要はありません！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<template> <div class="page"> <input v-model="text"> <ul> <li v-for="vegetables in filteredVegetables" :key="vegetables" > {{ vegetables }} </li> </ul> </div> </template> <script> export default { data () { return { vegetables: ['pumpkin', 'cabbage', 'cucumber', 'potato'], text: '', } }, computed: { filteredVegetables() { return this.vegetables.filter((element) => { return element.match(this.text); }); } }, } </script> <style lang="scss" scoped> </style> |