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

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 インスタンス内の任意の場所にグローバル フィルターを定義して登録できます。以下に例を示します。 <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> 上記のコード スニペットでは、テキストの最初の文字を大文字に変換する

capitalize

という名前のフィルターを定義しました。次に、Vue インスタンスで、テンプレート内のフィルターを使用できます。 <pre class='brush:html;toolbar:false;'>&lt;div id=&quot;app&quot;&gt; &lt;p&gt;{{ message | capitalize }}&lt;/p&gt; &lt;/div&gt;</pre>上記のコードは、

Hello world

をレンダリングします。

2. カスタム フィルター

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

以下はカスタム部分フィルターの例です: <pre class='brush:html;toolbar:false;'>&lt;div id=&quot;app&quot;&gt; &lt;p&gt;{{ message | uppercase }}&lt;/p&gt; &lt;/div&gt; &lt;script&gt; var app = new Vue({ el: '#app', data: { message: 'hello world' }, filters: { uppercase: function(value) { if (!value) return '' value = value.toString() return value.toUpperCase() } } }) &lt;/script&gt;</pre>上記のコードでは、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 サイトの他の関連記事を参照してください。