008-讀書筆記-Vue官網 過濾器

俱沫發表於2017-10-31
筆記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.參考內容

相關文章