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 表达式的尾部，由“管道”符号 `|` 表示。

相关问题

vue filter

Vue中的过滤器（filter）是一种可以在模板中使用的函数，用于对数据进行格式化处理。它可以用于格式化文本、格式化日期、格式化金额等等。在Vue中，过滤器可以全局注册或局部注册，全局注册的过滤器可以在任何Vue实例中使用，而局部注册的过滤器只能在当前Vue实例中使用。

以下是一个Vue过滤器的例子：

<template>
  <div>
    <p>{{ message | capitalize }}</p>
    <p>{{ date | formatDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
      date: '2022-01-01'
    }
  },
  filters: {
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    formatDate(value) {
      if (!value) return ''
      return new Date(value).toLocaleDateString()
    }
  }
}
</script>

上面的例子中，我们定义了两个过滤器：`capitalize`和`formatDate`。`capitalize`过滤器用于将字符串的第一个字符转换为大写，`formatDate`过滤器用于将日期格式化为本地日期字符串。在模板中，我们可以使用`|`符号将数据传递给过滤器进行处理。

vue3 使用 filter

在 Vue3 中，可以使用 `createApp` 函数的 `config.globalProperties` 属性来定义全局过滤器。具体步骤如下：

1. 在 `main.js` 中定义过滤器函数：

   const app = createApp(App)
   
   app.config.globalProperties.$filters = {
     // 定义过滤器函数
     toUpperCase(value) {
       return value.toUpperCase()
     }
   }
   
   app.mount('#app')

2. 在组件中使用过滤器：

   <template>
     <div>{{ message | toUpperCase }}</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         message: 'hello world'
       }
     }
   }
   </script>

在上面的例子中，我们定义了一个名为 `toUpperCase` 的过滤器函数，并将其挂载到了全局属性 `$filters` 上。在组件中，我们可以通过 `|` 符号来使用该过滤器。