Vue中filters過濾器怎么使用

# Vue中filters過濾器怎么使用

## 一、什么是Vue過濾器

Vue.js中的過濾器（Filters）是用于格式化文本的特殊函數，可以用在**雙花括號插值**和**v-bind表達式**中。過濾器通過管道符（|）調用，主要作用是對原始數據進行二次處理并返回格式化后的結果。

```javascript
<!-- 基本語法 -->
{{ message | filterName }}

<!-- 鏈式調用 -->
{{ message | filterA | filterB }}

二、過濾器的注冊方式

1. 全局注冊

通過Vue.filter()方法注冊全局過濾器，所有組件都可以使用：

Vue.filter('capitalize', function(value) {
  if (!value) return ''
  return value.toString().charAt(0).toUpperCase() + value.slice(1)
})

2. 局部注冊

在組件選項中通過filters屬性注冊：

export default {
  filters: {
    truncate(value, length = 10) {
      return value.length > length 
        ? value.substring(0, length) + '...'
        : value
    }
  }
}

三、過濾器的基本使用

1. 在插值表達式中使用

<p>{{ user.name | capitalize }}</p>

2. 在v-bind中使用

<div :title="rawTitle | truncate(5)"></div>

3. 鏈式調用

{{ date | formatDate | parseTime }}

四、過濾器參數傳遞

過濾器可以接收額外參數：

Vue.filter('currency', function(value, symbol = '￥') {
  return symbol + value.toFixed(2)
})

使用方式：

<p>{{ price | currency('$') }}</p>

五、常見使用場景

1. 文本格式化

// 手機號脫敏處理
filters: {
  hidePhone(val) {
    return val.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
  }
}

2. 日期格式化

推薦使用第三方庫如dayjs：

import dayjs from 'dayjs'

filters: {
  formatDate(val, format = 'YYYY-MM-DD') {
    return dayjs(val).format(format)
  }
}

3. 數字處理

// 千分位分隔
filters: {
  thousandSeparator(val) {
    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }
}

六、注意事項

1. this上下文：過濾器中無法訪問組件實例（this為undefined）
2. 響應性：過濾器應是純函數，不要修改原始數據
3. Vue 3變化：Vue 3已移除過濾器，推薦使用計算屬性或方法替代
4. 性能：復雜邏輯建議使用計算屬性

七、替代方案（Vue 3）

在Vue 3中可以通過以下方式替代過濾器：

// 使用computed
computed: {
  formattedDate() {
    return dayjs(this.date).format('YYYY-MM-DD')
  }
}

// 使用方法
methods: {
  currency(value) {
    return '￥' + value.toFixed(2)
  }
}

八、總結

Vue過濾器提供了一種便捷的文本格式化方案，適合處理簡單的數據轉換。雖然Vue 3已移除該特性，但在Vue 2項目中仍廣泛使用。開發者應根據項目需求選擇合適的數據處理方式，對于復雜邏輯建議優先使用計算屬性。

提示：在大型項目中，可將常用過濾器提取為獨立模塊，通過import引入保持代碼整潔。 “`

（全文約900字）