- content | 过滤器
- filter 中的 this 不是 vue 实例,是 undefined
- filter 应该是个纯函数,不应该依赖外界或者对外界有所影响。如果需要用到 this,可以用 computed 或者 method 代替。
- 过滤器中的 function 中的第一个参数,永远是过滤器管道符 | 前面传递过来的数据
- 组件内的过滤器(权力大,范围小【如果组件内filter与全局filter同名,组件内胜出】)
- options 中的一个 filters 的属性(一个对象)
- 多个 key 就是不同过滤器名,多个 value 就是与 key 对应的过滤方式函数体
- 全局过滤器(权利小,范围大【如果父组件与全局有相同 filter,且父组件有子组件,子组件使用全局 filter 】)
<input type="text" v-model="text">
显示: {{text | swReverse}}
显示2:{{text}}
// 组件内
filters: {
swReverse(value) {
return value.split("").reverse().join("");
}
}
// 全局过滤器
Vue.filter('swReverse', function(value) {
return value.split("").reverse().join("");
})
// 带参数的过滤器
msg: '我很单纯'
<p>{{ msg | msgFormat('疯狂', '123') }}</p>
// 字符串的 replace 方法,第一个参数可以是个正则
Vue.filter('msgFormat', function(msg, arg1, arg2) {
return msg.replace(/单纯/g, arg1 + arg2);
})