??????vue2.0廢棄了內(nèi)置過濾器，允許自定義過濾器。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達式的尾部，由“管道”符號指示。

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

單參數(shù)過濾器

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')；
})

<span v-text="msg | reverse"></span>

注冊了一個字符串反轉(zhuǎn)輸出的過濾器。

多參數(shù)過濾器

Vue.filter('warp', function (value,begin,end) {
  return begin + value + end；
})

<span v-text="msg | warp('start','end')"></span>

msg作為第一個參數(shù)傳入，start和end分別為第二個和第三個參數(shù)傳入。

動態(tài)參數(shù)過濾器

如果參數(shù)沒有被引號包起來，則他會在當前vm作用域內(nèi)計算，過濾器this始終指向調(diào)用它的vm。

Vue.filter('warp', function (value,input) {
  return value + input；
})

<input v-model='input'>
<span v-text="msg | warp(input)"></span>

雙向過濾器

上面介紹的都是model數(shù)據(jù)輸出到view之前進行數(shù)據(jù)轉(zhuǎn)化的，vue還支持來自視圖的值寫回模型前進行轉(zhuǎn)化。下面請看這個例子。

Vue.filter('example', {
  // model --> view
  read: function (value) {
      return 'read' + value;
  },
  // view --> model
  write: function (value) {
      return value + 'write';
  }
})

<div id='example'>
  <p>{{ msg }}</p>
   <input type='text' v-model='msg | example'>
</div>
let example = new Vue({
  el:'#example',
  data:{
    msg:'hello'
  }
});