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