前置き
テキストの変換処理ができるfilter🌟
computedやmethodsでも
同じことはできますが毎回作るのは面倒。
そんな時に便利なfilterです♪
今回は基本的な使い方と、
代表的な使用例をやっていきます🍒
・使い方：ローカルver
・使い方：グローバルver
・使用例：代表的な数字3桁ごとにカンマ
・使用例：絞り込み検索
【覚えること】
・基礎文法
・引数に必ずvalueがくる
使い方：ローカルver
テキストを全て大文字にします💡
【基礎文法】
該当ファイルのexport default内
<script>
export default {
filters: {
フィルタ名(value) {
// 処理
}
},
}
</script>
【index.vue】
{{ }} Mustache構文内に
filter名をパイプ記号( | )で繋げる
<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ファイル内に記載
Vue.filter('フィルタ名', function(value) {
//処理
});
【plugins/filter.js】
import Vue from 'vue'
Vue.filter('toLowercase', function (value) {
return value.toLowerCase();
})
【nuxt.config.js】
export default {
plugins: [
'~/plugins/filter.js'
],
}
【index.vue】
<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で全て小文字に変換
最終的に全て小文字になります〜！
{{ text | toUppercase | toLowercase }}
使用例：数字の3桁ごとにカンマ
filterの代表的な使用例ですね。
ついでにランダムで整数を表示させます。
乱数は10桁以上の数値にしました🌟
◾️方法1
toLocaleString()関数が簡単🤗
【plugins/filter.js】
import Vue from 'vue'
Vue.filter('addComma', function (value) {
return value.toLocaleString();
})
【nuxt.config.js】
export default {
plugins: [
'~/plugins/filter.js'
],
}
【index.vue】
<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>
◾️方法2
正規表現でやる場合🤗
filer.jsを書き換えます！
// 変更前
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
使用例：絞り込み検索
【index.vue】
データ更新の必要がないため
methodsではなくcomputedに記載します🌟
v-modelを使って表示させるため
{{ }} Mustache構文内に
filter名を繋げる必要はありません！
<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>
このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪
https://twitter.com/aLizlab