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データベース復旧実績

推薦する

MySQL のロードバランサーとして nginx を使用する方法

注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...

ウェブページ作成のヒントのまとめ

序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...

JSブラウザストレージの詳しい説明

目次導入クッキークッキーとはクッキー生成方法クッキーの適用シナリオクッキーのデメリット回避策ローカル...

Raspberry Pi 3B+ に 64 ビット Ubuntu システムと Docker ツールをインストールする詳細な手順

Raspberry Pi 3B に 64 ビット アプリケーション (64 ビット JDK など) ...

JSパッケージオブジェクトに関する簡単な説明

目次概要意味インスタンスメソッドプリミティブ型とインスタンスオブジェクト間の自動変換カスタムメソッド...

docker mysqlの起動時に初期化SQLを実行する

1.Mysqlイメージを取得するdocker pull mysql:5.7 2. MySQLイメージ...

テーブル関連の配置とJavascript操作テーブル、tr、td

適切に機能するテーブル プロパティ設定:コードをコピーコードは次のとおりです。 <テーブル セ...

Linuxシステムにmsfをインストールするプロセスの詳細な説明

または、インストールプロセスを自分で書き留めてください。私のサーバーシステムはAliyun Linu...

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

MySQLに絵文字表現を保存する詳細な手順

原因: java.sql.SQLException: 列の文字列値が正しくありません: '\...

WeChatミニプログラムが星評価を実装

この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...

DockerコンテナはホストのMySQL操作にアクセスする

背景:インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...

div を下から上にスライドさせる CSS3 の例

1. まず、CSS3 のターゲット セレクターを使用し、a タグを使用して id セレクターを指定し...

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...

TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明

目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...