Help us understand the problem. What is going on with this article?

Vue.jsのフィルターについて

フィルター

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

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

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を使う
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした