vue filter函数的用法

Vue.js 中的 filter 函数是用来格式化或转换数据的函数，类似于 JavaScript 中的 Array.prototype.filter() 函数。filter 函数可以接收一个值作为输入，并返回一个经过处理后的新值。

filter 函数通常用在模板中，用于对数据进行格式化或转换，例如将日期格式化为特定的字符串，将数字格式化为货币格式，将字符串进行截取等。

filter 函数的用法如下：

1. 在 Vue 实例中定义 filter 函数：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  },
  filters: {
    uppercase: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.toUpperCase()
    }
  }
})

在上面的例子中，我们定义了一个名为 uppercase 的 filter 函数，用于将字符串转换为大写字母。在模板中使用该 filter 函数的方法如下：

<div id="app">
  <p>{{ message | uppercase }}</p>
</div>

2. 在模板中直接定义 filter 函数：

<div id="app">
  <p>{{ message | uppercase }}</p>
</div>

<script>
  Vue.filter('uppercase', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.toUpperCase()
  })

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World'
    }
  })
</script>

在上面的例子中，我们将 filter 函数直接定义在模板中，并使用 Vue.filter() 来注册该 filter 函数。

需要注意的是，在 Vue.js 2.0 中，filter 函数已经被废弃，取而代之的是计算属性和方法。推荐使用计算属性和方法来进行数据的格式化和转换。