导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

• content | 过滤器
• filter 中的 this 不是 vue 实例，是 undefined
  • filter 应该是个纯函数，不应该依赖外界或者对外界有所影响。如果需要用到 this，可以用 computed 或者 method 代替。
• 过滤器中的 function 中的第一个参数，永远是过滤器管道符 | 前面传递过来的数据
• 组件内的过滤器（权力大，范围小【如果组件内filter与全局filter同名，组件内胜出】）
  • options 中的一个 filters 的属性（一个对象）
    • 多个 key 就是不同过滤器名，多个 value 就是与 key 对应的过滤方式函数体
• 全局过滤器（权利小，范围大【如果父组件与全局有相同 filter，且父组件有子组件，子组件使用全局 filter 】）
  • Vue.filter(名, fn)

<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);
})