vue filter()使用例子

Vue.js 的 `filter` 函数是用于在模板中进行文本过滤的工具，它允许你对文本进行格式化处理后再显示。在 Vue 实例中定义 `filters` 选项可以创建过滤器，然后可以在双花括号插值和 `v-bind` 表达式中使用它。

以下是一个简单的 Vue `filter` 使用例子：

// 定义一个Vue实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
});

// HTML模板使用定义的filter
<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

在上面的例子中，我们定义了一个名为 `capitalize` 的过滤器，它的功能是将文本首字母大写。然后在 HTML 模板中使用 `|` 符号将这个过滤器应用到 `message` 数据属性上，因此显示的文本将是 "Hello Vue!" 首字母大写的形式。

注意，过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号 `|` 表示。