《学习笔记7》——vue中filter(过滤器)的使用

vue官方网站中，过滤器有两个使用方式，一种是全局过滤器，即在创建 Vue 实例之前就已经全局定义了；另一种是局部过滤器，即在一个组件的选项中定义。过滤器的作用是，将数据进行二次的格式化。

下面先让我们来看看全局过滤器的使用方式。

1.全局过滤器

我们用一个例子来示范一下它的用法：

当我们需要根据 gender 的值（0或1）来渲染出 “ 女 ” “ 男 ” 性别时，可以使用computed属性。

  <div id="app">
    性别：{{g}}
  </div>


  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender: 0
      }，
      computed: {
        g() {
          return this.gender === 0 ? "女" : "男"
        }
      }
    })
  </script>

我们的输出如下：

性别：女

当我们需要动态的改变性别的值时，反复地修改computed属性显然是不方便的。这里我们假设要将 “ 女 ” 修改成 “ 女生 ”。这时候用过滤器就方便多了。

首先，先将computed渲染的数据，修改成filter过滤得到的数据。在filter中传入两个参数，第一个表示过滤器的名称，第二个是个回调函数。在回调函数中的第一个传参，形参是花括号中的第一个值。

<div id="app">
  性别：{{gender | g}}
</div>

<script>
  Vue.filter('g', (value)=>{
    return value === 0 ? "女" : "男"; 
  })
  const app = new Vue({
    el: '#app',
    data: {
      gender: 0
    }
  })
</script>

接着，在filter方法的回调函数中，传入第二个传参arg1表示要添加的值。

<div id="app">
  性别：{{gender | g('生')}}
</div>

<script>
  Vue.filter('g', (value, arg1)=>{
    return (value === 0 ? "女" : "男") + arg1; 
  })
  const app = new Vue({
    el: '#app',
    data: {
      gender: 0
    }
  })
</script>

得到输出如下：

性别：女生

当我们需要继续添加内容时，可以继续添加传参。

  <div id="app">
    性别：{{gender | g('生', '小')}}
  </div>

  <script>
    Vue.filter('g', (value, arg1, arg2)=>{
      return arg2 + (value === 0 ? "女" : "男") + arg1; 
    })

    const app = new Vue({
      el: '#app',
      data: {
        gender: 0
      }
    })
  </script>

得到输出如下：

性别：小女生

我们也可以串联多个过滤器：

  <div id="app">
    性别：{{gender | g | g1}}
  </div>

  <script>
    Vue.filter('g', (value)=>{
      return value === 0 ? "女" : "男"; 
    })
    Vue.filter('g1', (value)=>{
      return value === "女" ? "女孩" : "男孩";
    })

    const app = new Vue({
      el: '#app',
      data: {
        gender: 0
      }
    })
  </script>

得到输出如下：

性别：女孩

当我们有多个过滤器串联时，过滤器 " g " 会过滤gender的值(0)，然后过滤器 “ g1 ” 会过滤由过滤器 “ g ” 过滤后的值(女)。

---

2.局部过滤器

如果希望当前过滤器只在当前组件中生效时，可以在组件的选项中定义。

  <div id="app">
    性别：{{gender | g}}
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender: 0
      },
      filters: {
        g() {
          return this.gender === 0 ? "女" : "男";
        }
      }
    })
  </script>

输出如下：

性别：女

多个过滤器串联同理可得：

  <div id="app">
    性别：{{gender | g | g1}}
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender: 0
      },
      filters: {
        g(value) {
          return value === 0 ? "女" : "男";
        },
        g1(value) {
          return value === "女" ? "女生" : "男生";
        }
      }
    })
  </script>

得到输出如下：

性别：女生