ホームページ > 記事 > ウェブフロントエンド > vue filter フィルターインスタンスの詳細説明
VueJs は、データに対してさまざまなフィルター処理を実行し、必要な結果を返すことができる強力なフィルター API を提供します。この記事では主に Vue フィルターの例を紹介しますので、興味のある方は一緒に学んでください。
Vue フィルターは通常、JavaScript 式の最後にあり、「|」記号で示されています。一般に、時刻の書式設定、最初の文字の大文字化などに使用できます。
例:
これは関数呼び出しの記述方法です{{ date | dateFormat }}这
是过滤器的写法;{{ dateFormat(date) }}
フィルターがよりセマンティックな方法で記述されており、人々が一目でその意味を理解できることがわかります。
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <p v-bind:id="rawId | formatId"></p> <!-- 也可以串联多个过滤器 --> {{ message | filterA | filterB }}
// この例では、filterA は単一のパラメーターを受け取るフィルター関数として定義されており、式メッセージの値がパラメーターとして関数に渡されます。次に、フィルタ関数 filterB の呼び出しを続けます。これも 1 つのパラメータを受け取るように定義されており、filterA の結果を filterB に渡します
<!-- 过滤器接收参数 --> {{ message | capitalize('string', obj) }}
// ここでのパラメータは、内の 2 番目のパラメータとして渡されます。フィルター関数 最初の最初のパラメーターは、フィルターされる値メッセージです。つまり、'string' が 2 番目のパラメーターで、obj が 3 番目のパラメーターです。
filterメソッドのパラメータを受け取った後、メソッド内で一連の処理を行い、最終的に処理結果を返すことができます。
filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }2. フィルターはグローバル Vue にもマウントできます
上記は私があなたのためにコンパイルしたものです。今後皆さんのお役に立てば幸いです。
関連記事:
echartsのマウスオーバーレイでノードと関係名を強調表示以上がvue filter フィルターインスタンスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。