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