フィルター

テキストをフォーマットするようなもの
表示したいものを大文字にする、とか小文字にする、とか

例

全て大文字で表示したい時の例

templateタグの中のtitleだけでなく
subtitleまで表示させたい時、
scriptタグの中のcomputedを2回書かないと表示できないが...

Home.vue

<template>
    <div>
        <p v-border:solid.round.shadow="{width:'3px',color:'brown'}"></p>
        <h2>{{upperCaseTitle}}</h2>
        <p>{{subtitle}}</p>
    </div>
</template>

<script>
export default {
    data(){
            return{
                tmpData:"Hello",
                title:"Welcome to Tokyo",
                subtitle:"Tokyo is a great city"
            };
    },
    // 全て大文字にして表示させる
    computed:{
        uepperCaseTitle(){
            return this.title.toUpperCaseTitle();
        }
    },
    computed:{
        subTitle(){
            return this.title.subTitle();
        }
    }
</script>

フィルターを使うと

main.js

Vue.filter("upperCase",function(value){
return value,toUpperCase();
});

Home.vue

<template>
 <div>
  <h2>{{title | upperCase }}</h2>
  <p>{{subtitle | upperCase}}</p>
 </div>
</template>

<script>
 export default {
   data(){
    return{
      title:"タイトル",
      subtitle:"サブタイトル"
     };
   },
   computed:{
    upperCaseTitle(){
     return this.title.toUpperCaseTitle();
    }
  }
 };
</script>

templateタグのの
{{ }}のなかに、
|(パイプ記号)と、upperCaseと書くと、
computedは一回の記述でOK！

ローカルに登録する場合

Home.vue

//ローカルに登録する場合
<script>
export default {
    filters:{
        lowerCase(value){
            return value.toLowerCase();
        }
    }
};
</script>

※フィルターではthisは使えない！
もしthisでアクセスしたい場合は、computedやmethodを使う！

フィルターは連結できる

どうやってやるかというと・・・

Home.vue

<template>
 <h2>{{title | lowerCase | upperCase}}</h2>
</template>

という風に、先に書いた|(パイプ記号)の後に、さらに|を追加して、その後追加したいプロパティを追記します！

この結果は、全て大文字になります。

なぜかというと、
先にtitle | lowerCaseが実行され、
その後にupperCaseが実行されるからです

computed とfilterの違いは？？

動的なデータを表現する時に使うcoomputedオプションとfilterとでは何が違うのか??

その前にcomputedオプションとmethodオプションとでは何が違うのか??

computed

依存関係に基づいてキャッシュされる
いつその関数が実行されるかに注目する必要がある
参照先の値が変わった時のみ、実行される
リアクティブな依存関係に基づきキャッシュされる

method

clickイベントの中にmethodを書いたら、クリックした時に、イベントが発生する
{{ }} のなかにmethodを書くと、いつ実行したら良いかわからない
methodsの中身が新しく変わったら{{ }} の中身を書き換える必要があるが、templateの中身が少しでも変わって再描画された時、{{ method名 }}は、毎回実行されてしまう

filter

実行されるたびに再描画されてしまう
なので、再描画が頻繁に行われる場所では使わない方がいい
何度も同じような処理を書きたいけど、computedだと冗長なコードになってしまう場合はfilterを使う