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的用空格后加参数的写法；