Vue.jsのfilterを理解する！

#対象
Vue.jsでfilterとmixinを理解したい

前提知識

Vue.jsの基礎的な理解

filterとは？

フィルターとはテキストにたいしてなにかフォーマットを変更したい時などに用いることが多いです。
やってみる方がわかると思います。
今回はVue CLIを使用していきます。

Home.vue

<template>
<div>
  <h2>{{title}}</h2>
</div>
</template>

<script>
export default {
  data() {
    return {
      title: "welcom to tokyo",
    }
  },
}
</script>

このように記述します。
{{title}}の部分は全て小文字で表示されていますが、こちらを大文字にしていきたいとします。
こういった場合はcomputedで動的に変える方法とfilterを使う方法があります。

しかしcomputedを使って変える場合だと仮に{{subTitle}}のように値が増えるとそれごとに大文字にする処理を書かなければいけません

以下例です

Home.vue

<template>
<div>
  <p v-border:dotted="{color: 'red', width: '300px'}">Home</p>
  <h2>{{titleUppterCase}}</h2>
  <h2>{{subTitleUpperCase}}</h2>
</div>
</template>

<script>
export default {
  data() {
    return {
      title: "welcom to tokyo",
      sibTitle: "sub title"
    }
  },
  computed: {
    titleUppterCase() {
     return this.title.toUpperCase();
    },
    subTitleUpperCase() {
     return this.subTitle.toUpperCase();
    }
  }
}
</script>

これでも大文字になるのですが

computed: {
    titleUppterCase() {
     return this.title.toUpperCase();
    },
    subTitleUpperCase() {
     return this.subTitle.toUpperCase();
    }
  }

この部分が非常に冗長ですね。
ここで使えるのがフィルターです。

使い方としてはvue cliのmain.jsに記述していきます。

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.filter("upperCase", (value) => {
  return value.toUpperCase();
})

new Vue({
  render: h => h(App),
}).$mount('#app')

記述としてはこんな感じです。
まずfilterの第一引数に任意の名前をつけます。
第二引数は関数をとり、引数でvalueをとります。

これでフィルターの設定は完了です。
使いたい場合は

Home.vue

 <h2>{{ title | upperCase }}</h2>
 <h2>{{ subTitle | upperCase }}</h2>

たったこれだけ全てが大文字に適用されるようになります。
ちなみにmain.jsで記述すると全てのcomponentで扱えるグローバルフィルターになります。

ローカルフィルターを定義する

ローカルフィルターではそのcomponentないでだけ使用することができるようになります。

Home.vue

<script>
export default {
  data() {
    return {
      title: "welcom to tokyo",
      subTitle: "sub title"
    }
  },
  filters: {
    upperCase(value) {
      return value.toUpperCase();
    }
  }
}
</script>

scriptタグ内をこちらに変更するだけです！
filtersを定義してあとはその中に好きな関数を指定するだけになります。

注意点

computedとfilterを使う例を紹介してきましたが基本的にはcomputedの方が処理的には早いです。
なぜかと言うとcomputedはキャッシュを効かせられるのに大してfilterはキャッシュを効かせることができないからです。

なので何度も描画されてレンダリングが多いような場面ではfilterは使うものではないです。
そういった場面ではなく尚且つ同じような処理がふえそうな場面でつかって見ましょう！

お疲れさまでした！