フィルター
- テキストをフォーマットするようなもの
- 表示したいものを大文字にする、とか小文字にする、とか
例
全て大文字で表示したい時の例
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を使う