vue中過濾器的使用

vue過濾器的作用：

 在不改變原數據的前提下，對數據進行一定程度的處理，在返回並顯示在頁面上

過濾器的定義和使用

// 全局注冊
Vue.filter('toRMB', function (value) {
  return `￥${value}`
})
 
new Vue({
  el: '#app',
  data: {
    money: 223.1233,
  },
 
  // 局部注冊
  filters: {
    toRMB: function(money) {
      return  `￥${money}`
    },
    toFixed:function(money) {
      return  money.toFixed(1)
    },
  },
)}
 
// 注意:全局過濾器要寫在vue實例前

過濾器可以在v-bind或{undefined{}}  （插值）里使用，通過管道符(|)來連接

<p v-bind="money | toRMB"></p>   <!--￥233.1233-->
<p>{{money | toRMB}}</p> <!--￥233.1233-->
 
<!--也可以同時使用多個過濾器，但是一定要注意順序-->
<p v-bind="money | toFixed | toRMB"></p>   <!--￥233.1-->
 

當過濾器需要多個參數時，過濾器的第一個參數默認為管道符左側的原始值，其余參數依次在過濾器上傳入

Vue.filter('toDate', function (value,month,day) {
  return value + '-' + month + '-' + day
})
 
new Vue({
  data:{
     year:2019
  }
})

<p>{{year | toDate('04','22')}}</p>  <!--2019-04-22-->

filter：內容格式化，將輸入的數據，按照某種規則進行輸出，從這一層講，感覺叫 formatter 可能更合適；

method：數據、交互等的邏輯處理，相對 formatter 的功能更純粹，一般結合“數據驅動”的理念，盡量不直接操作 DOM；

directive：DOM 處理中心，擁有相對完整的生命周期，用於控制數據的流轉，一般的 DOM 處理等內容都集中到此

vue 對數據提供一個 filter 的處理器，用以在不改變data 的情況下 輸出前端需要的數據格式。對值進行篩選加工。