Vue フィルターの実装と適用シナリオの詳細な説明

<!-- 二重中括弧内 -->
{{ メッセージ | フィルター }}

<!-- `v-bind` 内 -->
<div v-bind:msg="メッセージ | フィルター"></div>

{{ メッセージ | フィルターA | フィルターB }}

{{ メッセージ | filterA('arg1', arg2) }}

<div id="アプリ">
  <h3>{{ユーザー名 | 追加名}}</h3>
</div>
<スクリプト>
// パラメータ 1: フィルタの名前、つまりパイプ文字の後の処理関数です。
// パラメータ2: 処理関数、処理関数のパラメータは上記と同じ	
Vue.filter("addName",(値)=>{											            
    「私の名前は」+値を返す
})
vm = new Vue({
    el:"#アプリ",
  	データ：{
     ユーザー名:"シャオミン" 
    }
})
</スクリプト>

// filter.js ファイルレット filterPrice = (値) => {
	「受け取った金額」+「値」+「元」を返す
}
filterDate = (値) => {
    戻り値 + '日'
}

デフォルトをエクスポート {filterPrice,filterDate}

//メイン.js
 
// 以下にインポートする方法が 2 つあります。最初の方法をお勧めします。import * as filters from './utils/filter/filter'
// './utils/filter/filter' から {filterPrice,filterDate} をインポートします
 
console.log(フィルター)
 
Object.keys(filters.default).forEach((item)=>{
  Vue.filter(アイテム、フィルター.default[アイテム])
})
 
新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App),
}).$mount('#app')

//テスト.vue

<テンプレート>
  <div>
    <input type="text" v-model="filterCount" >
    <div>{{フィルター数 | フィルター価格}}</div>
    <div>{{フィルターカウント | フィルター日付}}</div>
  </div>  
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      フィルター数:1500
    }
  },
}
</スクリプト>

//テスト.vue

<テンプレート>
  <div>
    <input type="text" v-model="filterCount" >
    <div>{{フィルター数 | フィルター価格}}</div>
    <div>{{フィルターカウント | フィルター日付}}</div>
  </div>  
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      フィルター数:1500
    }
  },
}
</スクリプト>

// メイン.js

'moment' から moment をインポートする
// グローバルフィルターを定義 - 時間形式 Vue.filter('format',function(val,arg){
  if(!val) 戻り値;
  val = val.toString()
  moment(val).format(arg) を返す
})

//テスト.vue

<テンプレート>
   <div class="filter">{{時間 | フォーマット('YYYY-MM-DD HH:MM:SS')}}</div>  
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（）{
    戻る {
      時刻:'2019-11-19T04:32:46Z'
    }
  }
}
</スクリプト>