008-读书笔记-Vue官网 过滤器

1.认识过滤器

• 过滤器的作用：用于文本格式化，仅仅作为格式化操作，不做复杂的业务处理
• 过滤器的使用方式：通过管道符号(|)来使用
• 过滤器的使用位置：mustache插值和v-bind表达式

2.过滤器的简单使用

2-1 使用过滤器

下面演示过滤器的两种使用方式。

在模板中使用过滤器

<template>
  <div id="app">
    <!-- mustache插值 -->
    <p>{{ testMsg | filter1 }}</p>

    <!-- v-bind表达式 -->
    <input :value="testMsg | filter1" type="text">
  </div>
</template>

2-2 定义过滤器

定义过滤器 过滤器的作用：为每一个字母后增加一个空格

<script type="text/javascript">
  export default {
    data() {
      return {
        testMsg: 'test'
      }
    },
    filters: {
      filter1(value) {
        return value.replace(/([a-zA-Z]{1})/g, '$1 ')
      }
    }
  }
</script>

3.过滤器参数

3-1 使用单个过滤器

一般情况下，过滤器使用的是一个参数，但是，如果要根据指定的方式来处理文本，就要使用函数吗？不需要，因为，过滤器可以传递n个参数。

如果要修改上面代码中的过滤器，根据传入的参数来分割字母，可以使用下面的方式修改。

<template>
  <div>
    <p>{{ testMsg | filter1('--') }}</p>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        testMsg: 'test'
      }
    },
    filters: {
      filter1(value, arg) {
        return value.replace(/([a-zA-Z]{1})/g, '$1' + arg)
      }
    }
  }
</script>

• 定义过滤器的时候，需要指定两个参数
• 第一个参数是管道符之前的值，{{ testMsg | filter1('--') }}中的testMsg
• 第二个参数是过滤器中需要传递的值，{{ testMsg | filter1('--') }}中的'--'

3-2 使用多个过滤器

过滤器可以多个一起使用，如{{msg | filter1 | filter2 | filter3}}。

参数传递情况：

{{msg | filter1 | filter2 | filter3}}

<!-- 
msg 作为 filter1 的参数
msg | filter1 的结果作为 filter2 的参数
msg | filter1 | filter2 的结果作为 filter3 的参数
-->

4.参考内容

• 过滤器