Vue グローバル フィルターの概念、注意事項、基本的な使用方法

Vue グローバル フィルターの概念、注意事項、基本的な使用方法

1. フィルターの概念

Vue.jsでは、一般的なテキストフォーマットに使用できるフィルターをカスタマイズできます。フィルターは、マスタッシュ補間とv-bind式の2つの場所で使用できます。

1. グローバルフィルターのフォーマットをカスタマイズする

Vue.filter('将来呼び出される際のフィルタ名'、フィルタ処理関数)

2. フィルターの呼び出し方法

 <!-- フィルターを呼び出すときは、| を使用して呼び出す必要があります。| はパイプ文字と呼ばれます -->
      <td>{{item.ctime | formatDate}}</td>
フィルター処理関数では、最初のパラメーターは固定されており、常にパイプ文字の前の値になります。
// ここでのデータはパイプ文字の前の item.ctime の値です Vue.filter('formatDate',function(data){

})
// フィルタには戻り値が必要です

3. フィルターに関する注意事項

  • Vue.filter('フィルター名', フィルター処理関数)
  • 注: フィルター処理関数では、最初のパラメーターには定義された関数があり、常にパイプ文字の前の値になります。
  • フィルター{{item.ctime | formmatDate}}を呼び出します。フィルターを呼び出すときは、パイプ文字と呼ばれる | を使用して呼び出す必要があります。
  • フィルターを呼び出すときにパラメータを渡すことができます。 {{item.ctime | formmatDate('傳遞參數')}}
  • 注: 最初のパラメータはパイプ文字の前の値で占有されているため、フィルターの呼び出しによって渡されるパラメータは、処理関数の 2 番目のパラメータからのみ受け取ることができます。
  • 注: フィルタの処理関数は値を返す必要があります
  • パイプ文字を使用して、複数のフィルターを連続して呼び出すことができます。最終的な出力結果は常に最後のフィルターに基づきます。
  • 注意: フィルターは補間式またはv-bindでのみ使用でき、 v-textなどの他の場所では使用できません。

4. 基本的な使い方

vue補間式を使用してページ上に文章をレンダリングする
  <div id="アプリ">
        <h3>{{mes}}</h3>
    </div>
<script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ:{
                mes: 「私は悲観的な人間です。そして悲観的な人間は悲観的なことをします」
            }
        })
    </スクリプト>
要件:要件: Vue の 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue のフィルターを本当に理解していますか?
  • Vue.js フィルターについてどれくらい知っていますか?
  • Vueフィルターの詳細な説明
  • Vueのフィルターについて知っておくべきこと
  • Vueのフィルターインスタンスコードの詳細な説明
  • Vue フィルターの使用例の分析
  • Vue2.0シリーズでのフィルターの使用
  • vue.js でフィルターを使用するチュートリアル
  • Vueでのフィルターの使用

<<:  CSS はスクロールバーを非表示にしてコンテンツをスクロールする効果を実現します (3 つの方法)

>>:  時点別のMySQLデータベース復旧実績

推薦する

ライフゲームの JavaScript 実装

目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...

Ubuntu 20.04は静的IPアドレスを設定します(異なるバージョンを含む)

Ubuntu 20.04はnetplanを通じてネットワークを管理するため、以前のバージョンとは少...

MySQL最適化ソリューション: スロークエリログを有効にする

目次序文スロークエリログの設定テスト付録: ログ解析ツール mysqldumpslow要約する序文こ...

JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア

目次1. 時刻表示に関する従来の考え方2. 時刻の書式設定 toLocaleString() Obj...

デスクトップ仮想化を実現するために Hyper-V を展開する手順 (グラフィック チュートリアル)

Hyper-V を展開するためのハードウェア要件は次のとおりです。 64 ビット プロセッサ、具体...

Web ページでフラッシュの wmode 属性を使用する方法をご存知ですか?

Web 開発を行う際に、フラッシュがページ内の要素をブロックする状況に遭遇することがあります。フラ...

Nginx Httpモジュールシリーズにおけるautoindexモジュールの具体的な使用法

ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...

CentOS7 から CentOS8 にアップグレードする方法 (詳細な手順)

この記事では、具体的な例を使用して、CentOS 7 から CentOS 8 にアップグレードする方...

docker 環境でのデータベース バックアップ (postgresql、mysql) のサンプル コード

目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...

方言変換のためのApache Calciteコード

意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明

目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...

ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...

シェルスクリプトを使用して Docker サービスを一括で開始および停止する

目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...

Centos7でファイルをバックアップするときは、バックアップファイルにバックアップの日付を追加します

Linux は、システム内のデバイス、インターフェース、ファイル、スタートアップ、アプリケーション ...