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 つの方法)
目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...
Ubuntu 20.04はnetplanを通じてネットワークを管理するため、以前のバージョンとは少...
目次序文スロークエリログの設定テスト付録: ログ解析ツール mysqldumpslow要約する序文こ...
目次1. 時刻表示に関する従来の考え方2. 時刻の書式設定 toLocaleString() Obj...
Hyper-V を展開するためのハードウェア要件は次のとおりです。 64 ビット プロセッサ、具体...
Web 開発を行う際に、フラッシュがページ内の要素をブロックする状況に遭遇することがあります。フラ...
ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...
この記事では、具体的な例を使用して、CentOS 7 から CentOS 8 にアップグレードする方...
目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...
意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...
ウェブページの自動更新: <head></head> の間に次のコードを追加...
目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...
Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...
目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...
Linux は、システム内のデバイス、インターフェース、ファイル、スタートアップ、アプリケーション ...