Vueの研究ノート[12] - フィルタ

コンセプト：Vue.jsはあなたがフィルタをカスタマイズすることができますが、一般的なテキストの書式として使用することができます。：フィルタは2つの場所で使用することができ口ひげ補間とvバインド式。フィルタは、JavaScript式、示されている「パイプ」の最後に追加されるべきです。

プライベートフィルタ

HTML要素：

<TD> {{item.ctime | dataFormat（ 'YYYY-MM-DD'）}} </ TD>

プライベートfilters-defined方法：

 フィルター：{//プライベートローカルフィルタは、現在のVMオブジェクトビューコントロールの領域内のみを使用することができます
 
     dataFormat（入力、パターン=「」）{//パラメータリストのパターンによる=「」エラーを防止するために、デフォルト値を指定するためのパラメータ
 
       VaRのdtは、新しいDate（入力）=。
 
       //日付を取得
 
       VaRのY = dt.getFullYear（）。
 
       。VAR、M =（dt.getMonth（）+ 1）.toString（）padStart（2、 '0'）。
 
       VaRのD = dt.getDate（）のtoString（）padStart（2、 '0'）。。。
 
 
 
       あなたは合格した場合、//文字列型は、年に戻り、その後、小文字の後に等しいYYYY-MM-DDを来た - 月 - 日
 
       ：分：秒 - 月 - 日時//それ以外の場合は、年を返します。
 
       IF（pattern.toLowerCase（）=== 'YYYY-MM-DD'）{
 
         リターン `$ {Y}  -  $ {M}  -  $ {D}`。
 
       }他{
 
         //分、秒を取得
 
         VAR = HH dt.getHours（）のtoString（）padStart（2,0）。
 
         VaRのMM = dt.getMinutes（）のtoString（）padStart（2,0）。
 
         VaRのSS = dt.getSeconds（）のtoString（）padStart（2,0）。
 
 
 
         リターン `$ {Y}  -  $ {M}  -  $ {D} $ {HH} $ {MM} $ {SS}`。
 
       }
 
     }
 
   }

文字列を埋めるためにString.prototype.padStart列ES6（maxLengthの、fillString = ''）またはString.prototype.padEnd（maxLengthの、fillString = ''）の新たな方法を用いて、

グローバルフィルタ

//グローバルフィルタを定義します。
 
 Vue.filter（ 'のdataFormat'、関数（入力、パターン= ''）{
 
   VaRのdtは、新しいDate（入力）=。
 
   //日付を取得
 
   VaRのY = dt.getFullYear（）。
 
   。VAR、M =（dt.getMonth（）+ 1）.toString（）padStart（2、 '0'）。
 
   VaRのD = dt.getDate（）のtoString（）padStart（2、 '0'）。。。
 
 
 
   あなたは合格した場合、//文字列型は、年に戻り、その後、小文字の後に等しいYYYY-MM-DDを来た - 月 - 日
 
   ：分：秒 - 月 - 日時//それ以外の場合は、年を返します。
 
   IF（pattern.toLowerCase（）=== 'YYYY-MM-DD'）{
 
     リターン `$ {Y}  -  $ {M}  -  $ {D}`。
 
   }他{
 
     //分、秒を取得
 
     VAR = HH dt.getHours（）のtoString（）padStart（2,0）。
 
     VaRのMM = dt.getMinutes（）のtoString（）padStart（2,0）。
 
     VaRのSS = dt.getSeconds（）のtoString（）padStart（2,0）。
 
 
 
     リターン `$ {Y}  -  $ {M}  -  $ {D} $ {HH} $ {MM} $ {SS}`。
 
   }
 
 }）;

注：2つのローカルおよびグローバル同じ名前のフィルタ時間があるとき、すなわち、近接の原則に呼び出されます：グローバルフィルター上のローカルフィルタの優先順位が呼び出されます！

Vueの研究ノート[12] - フィルタ

プライベートフィルタ

グローバルフィルタ

おすすめ