vue过滤器在v2.0版本用法

vue 1.x 的写法在 vue 2.x版本已经废除

vue 1.x 写法

 1 <body>
 2 <div id="app">
 3     {{message | capitalize | ...}}
 4 </div>
 5 <script>
 6     new Vue({
 7         el:'#app',
 8         data:{
 9             
10             message:"message"
11         }
12     })
13 </script>
14 </body>

上面代码输出："Message"(首字母大写)

vue 2.x 写法（需要自己自定义）

 1     <div id="app">
 2         {{message | capitalize}}
 3     </div>
 4 
 5     //注册全局过滤器
 6     Vue.filter('capitalize', function(value) {
 7         if (!value) { return ''}
 8         value = value.toString()
 9         //返回处理后的值
10         return value.charAt(0).toUpperCase() + value.slice(1)
11     })
12 
13     var vm = new Vue({
14         el:'#app',
15         data: {
16         　　message: 'message'
17     　　}
18    　}）

关于 filter 在 vue2.x 遇到的一些问题：

 1 // 注册
 2 Vue.filter('my-filter', function (value) {
 3   // 返回处理后的值
 4 })
 5 // getter，返回已注册的过滤器
 6 var myFilter = Vue.filter('my-filter')
 7 
 8 
 9 Vue.filter( id, [definition] )
10 
11 参数：
12     {string} id
13     {Function} [definition]

1.function里第一个参数value默认为使用这个过滤器的data对象内的值,第一个参数必须为自身的值，后面可以加任意多的参数。数序颠倒就会出错。

2.在vue2.0里管道符‘ | '只能用在 mousetache(插值) 和 v-bind 中。

3.“ | ”能将上一个过滤器输出内容作为下一个过滤器的输入内容。（<div>{{ content | reverseStr | removeNum }}</div>）

4.在vue2.0里过滤器只能用类似函数的写法reverseString( ‘I must tell you:')，括号内是参数，不同于vue1.0的用空格后加参数的写法；