Vue.filter関数の詳しい説明とフィルターのカスタマイズ方法-Vue.js-php.cn

Vue.filter関数の詳しい説明とフィルターのカスタマイズ方法

王林

リリース： 2023-07-29 15:07:51

オリジナル

736 人が閲覧しました

Vue.filter 関数の詳しい説明とフィルターのカスタマイズ方法

Vue.js では、フィルター (Filter) は、テキストの書式設定とデータの前処理を処理するためにテンプレート式に追加できる関数です。 Vue.filter メソッドは、グローバルフィルターを定義および登録するために Vue.js によって提供される柔軟な方法であり、任意のコンポーネントのテンプレートで使用できます。

1. Vue.filter 関数の構文と使い方

Vue.filter 関数の構文は次のとおりです:

Vue.filter( id, [definition] )

ログイン後にコピー

このうち、id はフィルターの名前です。、定義は関数またはオブジェクトにすることができます。関数の場合はフィルター関数として使用され、オブジェクトの場合は read と write という 2 つの属性を持つことができ、これらは表示のフィルター処理と

write

に使用されます。入力をフィルタリングする機能。

Vue.filter 関数を使用すると、Vue インスタンス内の任意の場所にグローバルフィルターを定義して登録できます。以下に例を示します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>Vue.filter('capitalize', function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) var app = new Vue({ el: '#app', data: { message: 'hello world' } })</pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードスニペットでは、テキストの最初の文字を大文字に変換する

capitalize

という名前のフィルターを定義しました。次に、Vue インスタンスで、テンプレート内のフィルターを使用できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><div id="app"> <p>{{ message | capitalize }}</p> </div></pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードは、

Hello world

をレンダリングします。

2. カスタムフィルター

Vue.filter 関数を使用してグローバルフィルターを定義することに加えて、ローカルフィルターをカスタマイズすることもできます。 Vue コンポーネントでは、[フィルター] オプションを使用してローカルフィルターを登録できます。

以下はカスタム部分フィルターの例です: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><div id="app"> <p>{{ message | uppercase }}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'hello world' }, filters: { uppercase: function(value) { if (!value) return '' value = value.toString() return value.toUpperCase() } } }) </script></pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードでは、uppercase という名前の部分フィルターを定義し、テンプレートに追加します。これを使用します。でフィルターします。ここでは、

message の値が大文字に変換されて表示されます。

3. フィルターの連鎖呼び出し

Vue.js では、フィルターは連鎖呼び出しもサポートしています。つまり、1 つの式で複数のフィルターを使用できます。

次は、複数のフィルターをチェーンする例です:

<div id="app">
  <p>{{ message | capitalize | reverse }}</p>
</div>

<script>
Vue.filter('capitalize', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Vue.filter('reverse', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.split('').reverse().join('')
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})
</script>

ログイン後にコピー

上記のコードでは、2 つのフィルターを定義します: capitalize はテキストの変換に使用されます。の最初の文字は、です。大文字に変換され、reverse

 を使用してテキストが反転されます。次に、テンプレート内でチェーン呼び出しを使用し、最初に

message の値を大文字に変換し、次にそれを反転してレンダリングしました。

概要:

この記事では、Vue.filter 関数の構文と使用法、およびグローバルフィルターとローカルフィルターをカスタマイズする方法について詳しく説明します。同時に、フィルターのチェーンコールも導入されます。フィルターを適切に使用することで、テキストの書式設定やデータの前処理機能を簡単に実装でき、ページをより柔軟かつ効率的にすることができます。あなたの Vue.js 開発に役立つことを願っています。 ###

以上がVue.filter関数の詳しい説明とフィルターのカスタマイズ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。