vue里的filters

在Vue中，filters（过滤器）是一种简单实用的功能，它可以对模板中的数据进行格式化、分割、截取等处理，简化我们的代码。

定义一个filter非常简单，只需要在Vue实例中调用Vue.filter()方法即可，例如：

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

以上代码定义了一个名为“capitalize”的filter，它将字符串的首字母大写，并返回结果。

在模板中使用filter也非常简单，使用竖线符号“|”连接filter名称和数据即可，例如：

{{ message | capitalize }}

以上代码将message字符串数据传入“capitalize”filter中进行处理，并将处理结果显示在页面上。

除了自定义的filter外，Vue也内置了一些常用的filter供我们使用，例如：

{{ message | uppercase }}
{{ message | lowercase }}
{{ number | currency }}
{{ date | date }}

以上filter分别是将字符串转为大写、小写、格式化数字为货币、格式化日期。

有时候我们还需要使用多个filter对同一个数据进行处理，这时我们可以按照顺序连续使用多个竖线符号“|”，例如：

{{ message | capitalize | uppercase }}

以上代码将先使用“capitalize”filter将message字符串首字母大写，再使用“uppercase”filter将字符串转为大写。

虽然filter仅仅是一个简单的功能，但却是Vue框架的重要组成部分，它可以帮助我们轻松地处理各种数据，让我们的代码更加简洁和易读。