ホームページ > ウェブフロントエンド > jsチュートリアル > VUE2.Xフィルターの使い方を詳しく解説

VUE2.Xフィルターの使い方を詳しく解説

小云云
リリース: 2018-01-13 13:20:00
オリジナル
1518 人が閲覧しました

この記事では主にVUE2の詳しい使い方を紹介します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

VUE2 を使用するにはいくつかの方法があります。
まず、assets フォルダーに新しい js フォルダーを作成し、common.js を作成して、このファイルにフィルターを書き込みます。もちろん、後で説明するように、単一のコンポーネントで記述することもできます。


/**
* 将tab类型转换成汉字
* @param {String} tab 待转换前的tab值
* @return {String}  转换后的tab中文
*/
export function change (tab) {
 switch (tab) {
  case 'share':
   return '分享'
  case 'ask':
   return '问答'
  case 'job':
   return '招牌'
  case 'good':
   return '精华'
 }
}
ログイン後にコピー

上記は common.js ファイル内のフィルターです。ファイルは次のとおりです:

以下の vue ファイルにフィルターを導入して使用します:

上記のフィルターは非常に重要です。そうでない場合、フィルターは機能しません。

最後のステップは、p で使用することです。とてもシンプルです。以下の通り:

上記の変更はフィルターです。 item.tab は、自動変換のためにタブ値を変更フィルターに渡します。 common.js にはさらにフィルターやその他のメソッドを記述することができます。使用方法は同じです。

vue ファイルにフィルターを直接記述することもできます。フィルターに記述するだけです:

関連する推奨事項:

jQuery でのフィルターの基本的な使用法の詳細な例

動的検索および並べ替え機能を実装するための Angularjs フィルターの説明

JQuery、セレクター/ フィルター/パフォーマンスの最適化


以上がVUE2.Xフィルターの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート