快應(yīng)用 過濾器

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

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

 {{ message | capitalize }}

在頁面自定義一個(gè)過濾器?capitalize?:

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

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

過濾器可以串聯(lián)：

{{ message | filterA | filterB }}

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

過濾器可以接收參數(shù)：

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

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

完整示例如下：

<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>