vue(四)过滤器

        过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。但考虑以后会用到还是记录一下吧。

1.过滤器

       过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地

方：插值表达式 和 v-bind 属性绑定。

2.定义过滤器

        在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：

const vm = new Vue({
    el: '#app',
    data: {
        message: 'hello vue.js'
    },
    filters: {
        capitalize(str) {   //把首字母转为大写的过滤器
            return str.charAt(0).toUpperCase() + str.slice(1)
        }
    }
})

使用：

<p>message 的值是：{{ message | capitalize }}</p>

3.私有过滤器和全局过滤器

        在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。 如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

//第一个参数是名字，第二个参数是全局过滤器的处理函数
Vue.filter("capitalize", (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1))
})

4.连续调用多个过滤器

        过滤器可以串联地进行调用，例如：

<p>{{ text | capitalize | maxLength}}</p>
 <!-- 第一个处理完的结果传给第二个再处理 -->

//大小写
Vue.filter("capitalize",  (str) => {
      return str.charAt(0).toUpperCase() + str.slice(1)
}
//长度
Vue.filter("maxLength", (str) => {
    if (str.length <= 10) return str
    return str.slice(0, 11) + '...'
}

5.过滤器传参

        过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：

<p>{{ text | capitalize | maxLength(5)}}</p>

//大小写
Vue.filter("capitalize",  (str) => {
      return str.charAt(0).toUpperCase() + str.slice(1)
}
//长度
Vue.filter("maxLength", (str,len) => {
    if (str.length <= 10) return str
    return str.slice(0, len) + '...'
}