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

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

vue 1.x 写法

 <body>
 <div id="app">
     {{message | capitalize | ...}}
 </div>
 <script>
     new Vue({
         el:'#app',
         data:{
             
             message:"message"
         }
     })
 </script>
 </body>

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

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

     <div id="app">
         {{message | capitalize}}
     </div>

     //注册全局过滤器
     Vue.filter('capitalize', function(value) {
         if (!value) { return ''}
         value = value.toString()
         //返回处理后的值
         return value.charAt(0).toUpperCase() + value.slice(1)
     })

     var vm = new Vue({
         el:'#app',
         data: {
         　　message: 'message'
     　　}
18    　}）

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

 // 注册
 Vue.filter('my-filter', function (value) {
   // 返回处理后的值
 })
 // getter，返回已注册的过滤器
 var myFilter = Vue.filter('my-filter')

 Vue.filter( id, [definition] )

 参数：
     {string} id
     {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的用空格后加参数的写法；