过滤器已在 vue 3 中删除，建议使用计算属性或方法来代替。

一、简介

在 Vue 中，过滤器是一种用于数据处理和格式化的功能。它们可以在模板中使用管道符|来对数据进行转换。过滤器可以在输出之前对数据进行一系列的处理操作，例如格式化日期、转换大小写等。

下文以以下代码为例：

<div id="app">
  <p>原始日期：{{ date }}</p>
  <p>格式化后的日期：{{ date | formatDate }}</p>
</div>

二、注册方式

1、全局

Vue.filter("formatDate", function (value) {
  // 使用 Moment.js 库来格式化日期
  return moment(value).format("YYYY-MM-DD");
});
new Vue({
  el: "#app",
  data: {
    date: "2022-01-01",
  },
});

2、组件内

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

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24