1. フィルターの概念
1. グローバルフィルターのフォーマットをカスタマイズするVue.filter('将来呼び出される際のフィルタ名'、フィルタ処理関数) 2. フィルターの呼び出し方法<!-- フィルターを呼び出すときは、| を使用して呼び出す必要があります。| はパイプ文字と呼ばれます --> <td>{{item.ctime | formatDate}}</td> フィルター処理関数では、最初のパラメーターは固定されており、常にパイプ文字の前の値になります。 // ここでのデータはパイプ文字の前の item.ctime の値です Vue.filter('formatDate',function(data){ }) // フィルタには戻り値が必要です 3. フィルターに関する注意事項
4. 基本的な使い方vue 補間式を使用してページ上に文章をレンダリングする<div id="アプリ"> <h3>{{mes}}</h3> </div> <script src="./js/vue.js"></script> <スクリプト> vm = new Vue({ el:'#app', データ:{ mes: 「私は悲観的な人間です。そして悲観的な人間は悲観的なことをします」 } }) </スクリプト>
まず、スクリプト タグ内のグローバル フィルターをカスタマイズし、フィルターに独自の名前を付けます。 Vue.filter('setStr',function(data){ }) フィルターにメソッドを定義します。 Vue.filter('setStr',function(data){ // フィルターには戻り値が必要です return data.replace(/pessimistic/g,'cheerful') // 文字列操作メソッド replace を使用して、文字列内の特定の要素を他の要素に置き換えます。g はグローバル一致を表します}) 次に補間式でフィルタを呼び出します <div id="アプリ"> <h3>{{mes | setStr}}</h3> </div> 効果を確認するには、次のページにアクセスしてください。 ![]() 基本フィルタが定義される メソッド内で置換する文字を指定せずに、フィルター関数内で仮パラメータを指定することもできます。 Vue.filter("strFormat",function(data,str){ // データの後にパラメータを指定できます // フィルタには戻り値が必要です return data.replace(/pessimistic/g,str) // 文字列操作メソッド replace を使用して、文字列内の特定の要素を他の要素に置き換えます。g はグローバル一致を表します}) 次に、呼び出し時に実際のパラメータを指定します。 <div id="アプリ"> <h3>{{mes | setStr("不注意")}}</h3> </div> 結果を表示: ![]() 仮パラメータにはデフォルト値を与えることもできます。呼び出し時に実パラメータを与えない場合はデフォルト値が出力されます。実パラメータを与えた場合は実パラメータの値が出力されます。 <div id="アプリ"> <h3>{{mes | setStr}}</h3> </div> <script src="./js/vue.js"></script> <スクリプト> Vue.filter('setStr',function(data,str="注意"){ // フィルターには戻り値が必要です return data.replace(/pessimistic/g,str) // 文字列操作メソッド replace を使用して、文字列内の特定の要素を他の要素に置き換えます。g はグローバル一致を表します}) 結果は次のとおりです。 ![]() 以上で、vue グローバル フィルターの概念、注意事項、基本的な使い方についての説明は終了です。vue グローバル フィルターに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS はスクロールバーを非表示にしてコンテンツをスクロールする効果を実現します (3 つの方法)
注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...
序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...
目次導入クッキークッキーとはクッキー生成方法クッキーの適用シナリオクッキーのデメリット回避策ローカル...
Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...
目次概要意味インスタンスメソッドプリミティブ型とインスタンスオブジェクト間の自動変換カスタムメソッド...
1.Mysqlイメージを取得するdocker pull mysql:5.7 2. MySQLイメージ...
適切に機能するテーブル プロパティ設定:コードをコピーコードは次のとおりです。 <テーブル セ...
または、インストールプロセスを自分で書き留めてください。私のサーバーシステムはAliyun Linu...
MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...
原因: java.sql.SQLException: 列の文字列値が正しくありません: '\...
この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...
背景:インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...
1. まず、CSS3 のターゲット セレクターを使用し、a タグを使用して id セレクターを指定し...
実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...
目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...