記事のディレクトリ
1.コンセプト
Vue.jsを使用すると、フィルターをカスタマイズできます。フィルターは、一般的なテキストの書式設定に使用できます。フィルタは、二重中括弧の補間とv-bind式の2つの場所で使用できます（後者は2.1.0以降でサポートされています）。フィルタは、「パイプ」|記号で表されるJavaScript式の最後に追加する必要があります。
<!-- 在双花括号中 -->
{
{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
2、使用
フィルタ関数は、常に式の値（前の操作チェーンの結果）を最初のパラメータとして受け取ります。
1.グローバルフィルターを定義します
//这个过滤器用于将首字母大写
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
el: "#app",
data: {
message: "hello"
}
})
<div id="app">
<!--Hello-->
<h2>{
{message | capitalize}}</h2>
</div>
2.コンポーネントでローカルフィルターを定義します
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
グローバルフィルターとローカルフィルターの名前が同じ場合は、ローカルフィルターが使用されます。
3.フィルターは直列に接続できます
{
{
message | filterA | filterB }}
この例でfilterAは、単一のパラメーターを受け取るフィルター関数として定義されており、式メッセージの値がパラメーターとして関数に渡されます。同じ呼が単一の引数とフィルタ関数として定義され続けfilterB、そしてfilterA結果がに送信されますfilterB。
new Vue({
el: "#app",
data: {
message: "hello"
},
filters: {
addMessage(value) {
return value + ' webchang';
},
addMessage2(value) {
return value + ' world!';
}
}
})
<!-- hello webchang world! -->
<h2>{
{message | addMessage | addMessage2}}</h2>
4.フィルターはパラメーターを受け取ることができます
フィルタはJavaScript関数であるため、パラメータを受け取ることができます
{
{
message | filterA('arg1', arg2) }}
filterAこれは、3つのパラメーターを受け取るフィルター関数として定義されています。ここで、メッセージ値は最初のパラメーター、プレーン文字列'arg1'は2番目の引数、式のarg2値は3番目のパラメーターです。
new Vue({
el: "#app",
data: {
message: "hello"
},
filters: {
addMessage3(value, arg1, arg2) {
return value + arg1 + arg2;
}
}
})
<!-- hello111 你好啊 -->
<h2>{
{message | addMessage3(111,' 你好啊')}}</h2>