vue filters

// Vue Filters 示例代码

// 定义一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  filters: {
    // 定义一个简单的过滤器，将文本转换为大写
    uppercase: function (value) {
      if (!value) return '';
      return value.toUpperCase();
    },
    // 定义一个过滤器，用于格式化日期
    formatDate: function (value) {
      if (value) {
        const date = new Date(value);
        return date.toLocaleDateString();
      }
      return '';
    }
  }
});

// 使用过滤器
<!-- 在模板中使用过滤器 -->
<div id="app">
  <p>{{ message | uppercase }}</p>
  <p>{{ '2023-10-05' | formatDate }}</p>
</div>

// 解释说明：
// 1. `filters` 是 Vue 实例的一个选项，用于定义全局或局部的过滤器。
// 2. 过滤器可以链式调用，并且可以接收参数。
// 3. 在模板中使用过滤器时，使用管道符号 `|` 来应用过滤器。