vue2 filters

// Vue 2 Filters 示例代码

// 定义一个 Vue 实例，并在其中定义一个 filter
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  filters: {
    // 定义一个简单的 filter，将文本转换为大写
    uppercase: function (value) {
      if (!value) return '';
      value = value.toString();
      return value.toUpperCase();
    }
  }
});

<!-- HTML 部分 -->
<div id="app">
  <!-- 使用 filter 将 message 转换为大写 -->
  <p>{{ message | uppercase }}</p>
</div>

解释说明：

• Vue Filters 是 Vue 2 中用于格式化显示数据的一种方式。它们可以在模板中通过管道符号 | 来使用。
• 在上面的示例中，我们定义了一个名为 uppercase 的 filter，它会将传入的字符串转换为大写。
• filters 是 Vue 实例的一个选项，允许我们在组件内部定义多个自定义过滤器。
• 在模板中，我们通过 {{ message | uppercase }} 来应用这个过滤器，从而将 message 的值转换为大写并显示在页面上。

如果你需要更复杂的过滤逻辑，可以扩展 filter 函数的功能。