Vue2复习整理笔记--Vue2.0过滤器

一、过滤器：

1、基本简介

• vue2中使用，vue3 无。
• 主要用于文本的格式化。
• 可以用在：插值表达式{{ }} 和 v-bind 属性绑定中。
• 应该被添加在JS表达式的尾部，由“管道符”--‘|’  进行调用。
• 示例：

HTML:

<div id="app1">
    <!-- 文本 | 过滤器函数名    使用该过滤器格式化文本，展示的是过滤器的返回值-->
    <p> {{ message | capitalize }}</p>
    <div :id=" rawId | formatId"> </div>
</div> 

JavaScript：

    const vm1 = new Vue({
      el: '#app1',
      data() {
        return {
          message: 'hello vue',
          rawId: 'jack'
        }
      },
      filters: {
        //过滤器函数必须要有返回值
        //message会作为实参给到形参val
        capitalize(val) {
           //给字符串首字母大写
           return val.replace(val.charAt(0), val.charAt(0).toUpperCase()) + '!';
           // return val.charAt(0).toUpperCase();//H
        },
        formatId(id) {
          console.log(id.toUpperCase());
          return id.toUpperCase();
        }
      }

    })

运行结果：

界面：

控制台：

2、私有过滤器与全局过滤器

以上介绍的是私有过滤器的用法，私有过滤器只能在当前vm实例所控制的el区域内使用。

当我们需要多个vue实例之间共享过滤器时，最好定义全局过滤器。

示例：

HTML:

 <div id="app1">
    <p> {{ message | capitalize }}</p>
  </div>


  <!-- 由于私有过滤器只控制 当前vue实例 所控制的div对象，其余对象不能使用，所以使用全局过滤器让所有div都能使用 -->
  <div id="app2">
    <p> {{ message | capitalize }}</p>
  </div>

JavaScript：

   const vm1 = new Vue({
      el: '#app1',
      data() {
        return {
          message: 'hello vue',
          rawId: 'jack'
        }
      },
      filters: {
        //过滤器函数必须要有返回值
        capitalize(val) {
          return val.replace(val.charAt(0), val.charAt(0).toUpperCase()) + '!';
          // return val.charAt(0).toUpperCase();//H
        },
        formatId(id) {
          console.log(id.toUpperCase());
          return id.toUpperCase();
        }
      }

    })

    const vm2 = new Vue({
      el: '#app2',
      data() {
        return {
          message: 'hi,vue.js'
        }
      }
    })

运行结果：

由于 Capitalize过滤器为vm1私有，它只能控制 #app1 区域，所以vm2所控制的 #app2 区域无法使用Capitalize过滤器进行格式化文本。

出现报错：找不到Capitalize过滤器，当然我们可以在vm2中也定义一个名为Capitalize的过滤器，但这种方法代码臃肿，考虑到代码的复用性，选择定义全局过滤器。

JavaScript：

    // 全局过滤器在vue实例前声明
    // Vue.filter('过滤器函数名'，'处理函数')
    // 这里使用ES6语法箭头函数声明:
    // Vue.filter('过滤器函数名'，(str) => { 函数体 return 返回值;  })
    Vue.filter('capitalize', (str) => {
      return str.replace(str.charAt(0), str.charAt(0).toUpperCase()) + '!!!';
    });

    const vm1 = new Vue({
      el: '#app1',
      data() {
        return {
          message: 'hello vue',
          rawId: 'jack'
        }
      },
      filters: {
        //过滤器函数必须要有返回值
        // capitalize(val) {
        //   return val.replace(val.charAt(0), val.charAt(0).toUpperCase()) + '!';
        //   // return val.charAt(0).toUpperCase();//H
        // },
        formatId(id) {
          console.log(id.toUpperCase());
          return id.toUpperCase();
        }
      }

    })

    const vm2 = new Vue({
      el: '#app2',
      data() {
        return {
          message: 'hi,vue.js'
        }
      }
    })

运行结果：

 如果全局过滤器与私有过滤器名字重复，则就近使用私有过滤器。

如果将上面代码中，vm1中注释掉的capitalize函数取消注释，运行可得：

可验证：如果全局过滤器与私有过滤器名字重复，则就近使用私有过滤器。

3、连续调用多个过滤器

串联调用：{{ message |   capitalize  |  formatId }}

<div id="app1">
    <p> {{ message | capitalize | formatId}}</p>
</div>

运行结果：

运行分析：

message作为参数，传给 capitalize 过滤器，return:  'Hello vue!'；

'Hello vue!'作为参数，传给  formatId 过滤器，return: 'HELLO VUE!'；

最终输出展示：HELLO VUE!

4、给过滤器传参

代码示例：

HTML:

<div id="app2">
    <p> {{ message | capitalize('xxx:','!!!') }}</p>
</div>

 JavaScript:

// 全局过滤器在vue实例前声明
    Vue.filter('capitalize', (str, pre, end) => {
      return pre + str.replace(str.charAt(0), str.charAt(0).toUpperCase()) + '!' + end;
    });

运行结果：

5、过滤器的兼容性 

 vue3.0剔除过滤器，使用计算属性或方法代替。