uni-app 中如何定义和使用过滤器？

推荐答案

在 uni-app 中，过滤器（Filter）是一种用于格式化文本的工具，通常用于在模板中对数据进行处理。uni-app 支持 Vue.js 的过滤器功能，可以通过全局或局部的方式定义和使用过滤器。

全局过滤器

全局过滤器可以在整个应用中使用。通常在 main.js 中定义全局过滤器。

// main.js
import Vue from 'vue'

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

在模板中使用全局过滤器：

// www.javascriptcn.com code example
<template>
  <view>
    <text>{{ message | capitalize }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  }
}
</script>

局部过滤器

局部过滤器仅在当前组件中可用。可以在组件的 filters 选项中定义局部过滤器。

// www.javascriptcn.com code example
<template>
  <view>
    <text>{{ message | reverse }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  filters: {
    reverse(value) {
      if (!value) return ''
      return value.split('').reverse().join('')
    }
  }
}
</script>

本题详细解读

过滤器的定义

过滤器是一个函数，它接收一个值作为输入，并返回处理后的值。过滤器可以用于格式化文本、日期、数字等。

过滤器的使用

在模板中，过滤器通过管道符 | 来使用。过滤器可以串联使用，即一个过滤器的输出可以作为另一个过滤器的输入。

<template>
  <view>
    <text>{{ message | capitalize | reverse }}</text>
  </view>
</template>

过滤器的参数

过滤器可以接收额外的参数。例如：

Vue.filter('truncate', function (value, length) {
  if (!value) return ''
  if (value.length <= length) return value
  return value.slice(0, length) + '...'
})

在模板中使用带参数的过滤器：

<template>
  <view>
    <text>{{ message | truncate(10) }}</text>
  </view>
</template>

注意事项

1. 过滤器仅在 Vue 2.x 中支持，Vue 3.x 中已移除过滤器功能，建议使用计算属性或方法替代。
2. 过滤器应保持简单，避免复杂的逻辑处理。
3. 全局过滤器应谨慎使用，避免命名冲突。