Vueフィルター（フィルター）
主にテキストの書式設定、配列データのフィルタリングと並べ替えなどに使用されます。
2つの場所で 使用：1。{ {}}補間、2.v-bind
{
{message | capitalize}}
<div v-bind:id="rawId" | formatId"></div>
グローバルフィルター
グローバルフィルタヴュー。定義フィルタ（「フィルタID（名称）」関数（値）{
フィルタの機能
}）
フィルタの本質は関数です：フィルタ名=関数名 "myfilter"
内挿式では、変数はフィルターに渡されるパラメーターです。
<div id="app">
<input type="text" v-model="message">
<br><br>
{
{message | myfilter}}
</div>
<script>
//过滤器本质是一个函数：过滤器名=函数名“myfilter”
//在插值表达式中，变量即传递给过滤器的参数
Vue.filter("myfilter",function(value){
if(!value){
return ""
}
value = value.toString();//将value的值转换为字符串
return value.toUpperCase();
})
new Vue({
el:"#app",
data:{
message:"Hello World"
}
})
</script>
ローカルフィルター
<div id="app">
<input type="text" v-model="message">
<br><br>
{
{message | myfilter}}
</div>
<script>
new Vue({
el:"#app",
data:{
message:"Hello"
},
filters:{
//局部过滤器
myfilter:function(value){
if(!value) return ""
value = value.toString();
return value.toLowerCase()
}
}
})
</script>
フィルターシリーズ
{ {メッセージ| filterA | filterB}}
この例filterAでは、単一の引数とフィルター関数、message引数として渡される式の値として定義されています。同じ呼が単一の引数とフィルタ関数として定義され続けfilterB、そしてfilterA結果がに送信されますfilterB。
{ {メッセージ| filterA（ 'arg1'、arg2）}}
ここでは、filterA3つのパラメーターを受け取るフィルター関数として定義されています。ここでmessage、最初のパラメータ値は通常の文字列'arg1'として2番目のパラメータとして、式のarg2値は3番目のパラメータとして使用されます。