在 hap-toolkit 0.4.0 之后，允許自定義過濾器，可用于文本格式化。

過濾器在雙花括號中使用，以函數的形式在頁面導出的對象中定義。使用過濾器時，應該添加到表達式的尾部，由管道符號指示。 和?vue?過濾器類似，其形式如下：

 {{ message | capitalize }}

在頁面自定義一個過濾器?capitalize?:

<script>
  export default {
    private: {
      message: 'hello'
    },
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
</script>

過濾器函數接收表達式的值作為第一個參數。在上述例子中，?capitalize?過濾器函數將會收到 ?message?的值作為第一個參數。

過濾器可以串聯：

{{ message | filterA | filterB }}

在這個例子中，?filterA?被定義為接收單個參數的過濾器函數，表達式 ?message? 的值將作為參數傳入到函數中。然后繼續(xù)調用同樣被定義為接收單個參數的過濾器函數 ?filterB?，將 ?filterA? 的結果傳遞到 ?filterB? 中。

過濾器可以接收參數：

{{ message | filterA('arg1', arg2) }}

這里，?filterA? 被定義為接收三個參數的過濾器函數。其中 ?message? 的值作為第一個參數，普通字符串? 'arg1' ?作為第二個參數，表達式 ?arg2? 的值作為第三個參數。

完整示例如下：

<template>
  <div>
    <text>{{ message | capitalize }}</text>
  </div>
</template>

<script>
  export default {
    private: {
      message: 'hello'
    },
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
</script>