前置き

テキストの変換処理ができるfilter🌟
computedやmethodsでも
同じことはできますが毎回作るのは面倒。
そんな時に便利なfilterです♪

今回は基本的な使い方と、
代表的な使用例をやっていきます🍒
・使い方：ローカルver
・使い方：グローバルver
・使用例：代表的な数字3桁ごとにカンマ
・使用例：絞り込み検索

【覚えること】
・基礎文法
・引数に必ずvalueがくる

使い方：ローカルver

テキストを全て大文字にします💡

【基礎文法】
該当ファイルのexport default内

index.vue

<script>
export default {
 filters: {
   フィルタ名(value) {
     // 処理
   }
 },
}
</script>

【index.vue】
{{ }} Mustache構文内に
filter名をパイプ記号( | )で繋げる

index.vue

<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】

plugins/filter.js

import Vue from 'vue'

Vue.filter('toLowercase', function (value) {
 return value.toLowerCase();
})

【nuxt.config.js】

nuxt.config.js

export default {
 plugins: [
   '~/plugins/filter.js'
 ],
}

【index.vue】

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で全て小文字に変換
最終的に全て小文字になります〜！

使用例：数字の3桁ごとにカンマ

filterの代表的な使用例ですね。
ついでにランダムで整数を表示させます。
乱数は10桁以上の数値にしました🌟

◾️方法1
toLocaleString()関数が簡単🤗

【plugins/filter.js】

plugins/filter.js

import Vue from 'vue'

Vue.filter('addComma', function (value) {
 return value.toLocaleString();
})

【nuxt.config.js】

nuxt.config.js

export default {
 plugins: [
   '~/plugins/filter.js'
 ],
}

【index.vue】

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を書き換えます！

plugins/filter.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名を繋げる必要はありません！

index.vue

<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