vue 自定义过滤器

      vue2.0废弃了内置过滤器，允许自定义过滤器。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

<!-- 在双花括号中 -->
{{ message | capitalize }}

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

单参数过滤器

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

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

注册了一个字符串反转输出的过滤器。

多参数过滤器

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

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

msg作为第一个参数传入，start和end分别为第二个和第三个参数传入。

动态参数过滤器

如果参数没有被引号包起来，则他会在当前vm作用域内计算，过滤器this始终指向调用它的vm。

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

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

双向过滤器

上面介绍的都是model数据输出到view之前进行数据转化的，vue还支持来自视图的值写回模型前进行转化。下面请看这个例子。

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'
  }
});