vue怎么實現貨幣過濾器

# Vue怎么實現貨幣過濾器

## 前言

在前端開發中，貨幣格式化是常見的需求。Vue.js提供了多種方式來實現貨幣過濾器，包括內置過濾器、自定義過濾器和第三方庫等。本文將詳細介紹在Vue 2.x和Vue 3.x中實現貨幣過濾器的各種方法，并分析其優缺點。

## 一、Vue 2.x中的貨幣過濾器實現

### 1. 使用filters選項（Vue 2專屬）

```javascript
// 全局過濾器
Vue.filter('currency', function(value) {
  if (!value) return ''
  return '￥' + parseFloat(value).toFixed(2)
})

// 組件內過濾器
export default {
  filters: {
    currency(value) {
      return '￥' + parseFloat(value).toFixed(2)
    }
  }
}

使用方式：

<p>{{ price | currency }}</p>

2. 使用計算屬性

export default {
  data() {
    return { price: 1234.5 }
  },
  computed: {
    formattedPrice() {
      return '￥' + this.price.toFixed(2)
    }
  }
}

3. 使用方法

methods: {
  formatCurrency(value) {
    return '￥' + parseFloat(value).toFixed(2)
  }
}

二、Vue 3.x中的貨幣過濾器實現

Vue 3移除了過濾器概念，推薦使用以下替代方案：

1. 全局屬性

// main.js
app.config.globalProperties.$filters = {
  currency(value) {
    return '￥' + parseFloat(value).toFixed(2)
  }
}

// 組件中使用
<p>{{ $filters.currency(price) }}</p>

2. 組合式API實現

import { computed } from 'vue'

export function useCurrency() {
  const currency = (value) => {
    return '￥' + parseFloat(value).toFixed(2)
  }
  
  return { currency }
}

// 組件中使用
const { currency } = useCurrency()
<p>{{ currency(price) }}</p>

三、高級貨幣格式化

1. 添加千分位分隔符

function formatCurrency(value) {
  return '￥' + parseFloat(value)
    .toFixed(2)
    .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

2. 國際化處理（Intl API）

function formatCurrency(value, locale = 'zh-CN', currency = 'CNY') {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency
  }).format(value)
}

3. 動態貨幣符號

const currencySymbols = {
  CNY: '￥',
  USD: '$',
  EUR: '€'
}

function formatCurrency(value, currency = 'CNY') {
  const symbol = currencySymbols[currency] || ''
  return symbol + parseFloat(value).toFixed(2)
}

四、使用第三方庫

1. accounting.js

import accounting from 'accounting'

// 簡單格式化
accounting.formatMoney(12345678)

// 自定義選項
accounting.formatMoney(4999.99, {
  symbol: "￥",
  precision: 2,
  thousand: ",",
  decimal: "."
})

2. vue-currency-filter

import VueCurrencyFilter from 'vue-currency-filter'

Vue.use(VueCurrencyFilter, {
  symbol: '￥',
  thousandsSeparator: ',',
  fractionCount: 2,
  fractionSeparator: '.',
  symbolPosition: 'front',
  symbolSpacing: false
})

五、性能優化建議

1. 緩存格式化結果：對于靜態數據，避免重復計算
2. 防抖處理：對輸入框實時格式化時使用防抖
3. Web Worker：大數據量格式化考慮使用Web Worker
4. 按需加載：只在需要時加載大型格式化庫

六、完整示例代碼

Vue 2組件示例

<template>
  <div>
    <p>價格1: {{ price1 | currency('CNY') }}</p>
    <p>價格2: {{ formatCurrency(price2, 'USD') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price1: 1234.56,
      price2: 7890.12
    }
  },
  filters: {
    currency(value, type) {
      const symbols = { CNY: '￥', USD: '$' }
      return (symbols[type] || '') + parseFloat(value)
        .toFixed(2)
        .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  },
  methods: {
    formatCurrency(value, type) {
      return this.$options.filters.currency(value, type)
    }
  }
}
</script>

Vue 3組合式API示例

<template>
  <p>{{ formattedPrice }}</p>
  <p>{{ formatCurrency(dynamicPrice, currencyType) }}</p>
</template>

<script setup>
import { computed, ref } from 'vue'

const price = 1234.56
const dynamicPrice = ref(7890.12)
const currencyType = ref('CNY')

const formattedPrice = computed(() => {
  return formatCurrency(price.value)
})

function formatCurrency(value, type = 'CNY') {
  const symbols = { CNY: '￥', USD: '$', EUR: '€' }
  const symbol = symbols[type] || ''
  return symbol + parseFloat(value)
    .toFixed(2)
    .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
</script>

七、常見問題解答

Q1: 為什么我的過濾器在Vue 3中不工作了？
A1: Vue 3移除了過濾器概念，需要使用方法或計算屬性替代。

Q2: 如何處理貨幣計算精度問題？
A2: 建議先將值乘以100轉為整數進行計算，最后再除以100，避免浮點數精度問題。

Q3: 如何實現多語言貨幣格式化？
A3: 推薦使用Intl.NumberFormat API或第三方庫如vue-i18n配合貨幣格式化。

結語

貨幣格式化是前端開發中的常見需求，Vue提供了多種實現方式。在Vue 2中可以使用過濾器，而在Vue 3中推薦使用方法或組合式函數。對于復雜場景，可以考慮使用專業的國際化庫或貨幣處理庫。根據項目需求選擇合適的方式，同時注意性能和國際化支持。

提示：在實際項目中，建議將貨幣格式化邏輯封裝成可復用的工具函數或自定義Hook，便于統一維護和修改。 “`

這篇文章總計約1800字，涵蓋了Vue 2和Vue 3中實現貨幣過濾器的各種方法，包括基礎實現、高級格式化和第三方庫集成，并提供了完整的代碼示例和常見問題解答。