グローバルフィルター ここをクリックグローバルフィルター 使い方はグローバルフィルタと同じですが、定義が異なります グローバルフィルターは script 内でVue.filter を通じて定義されます。プライベートフィルタの定義方法: <スクリプト> vm = new Vue({ el:'#app', データ:{ }, フィルター: { // このインスタンスのプライベートフィルター} }) </スクリプト> vm インスタンスには、 data と同じレベルのfilters があり、現在のインスタンスのプライベート フィルターを定義するために使用されます。<div id="アプリ"> <p>{{mes | 追加Str}}</p> </div> <script src="./js/vue.js"></script> <スクリプト> vm = new Vue({ el:'#app', データ:{ mes: 「私は悲観的な人間です。そして悲観的な人間は悲観的なことをします」 }, フィルター: { // 現在のインスタンスのプライベートフィルター addStr(data,str="happy"){ 戻り値 data.replace(/pessimistic/g,str) } } }) </スクリプト> 出力は次のようになります。 ![]() ページに 2 番目のインスタンス vm2 がある場合、 vm 内のフィルターは呼び出すことができません。ページにグローバルフィルターとプライベートフィルターがある場合、それらを同時に呼び出すことができます。 <div id="アプリ"> <p>{{mes | setStr | addStr}}</p> </div> <script src="./js/vue.js"></script> <スクリプト> Vue.filter('setStr',function(data){ データを返す+'私はグローバルフィルターです' }) vm = new Vue({ el:'#app', データ:{ mes: 「私は悲観的な人間です。そして悲観的な人間は悲観的なことをします」 }, フィルター: { // 現在のインスタンスのプライベートフィルター addStr(data,str="happy"){ 戻り値 data.replace(/pessimistic/g,str) } } }) </スクリプト> 出力: ![]() 要約: 呼び出しの際には、グローバルを前に、プライベートを後ろに呼び出します しかし、出力結果ではプライベートフィルタが最初に処理される。 したがって、グローバル フィルターとプライベート フィルターを同時に呼び出す場合、呼び出しルールでは、近い方のフィルターが最初に出力されます。 最初はプライベート、次にグローバル これで、vue のプライベート フィルターの定義と基本的な使用法に関するこの記事は終了です。より関連性の高い vue のプライベート フィルターの定義については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法
>>: 枠線や境界線のない iframe を使用するための完全ガイド (実践経験のまとめ)
Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...
1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...
ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...
<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...
問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...
スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです(怠惰のためでも...
目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...
目次1. 技術概要2. 技術的な詳細1. インターフェースからバックエンドデータを取得する2. フロ...
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...
最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...
目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...
<br />昨日、W3C で新しいHTML 5 ドラフト (ワーキング ドラフト) が ...
目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...
この記事では、ネイティブ JS によって実装された動的読み込みプログレス バーの特殊効果を紹介します...