vue3 加￥和千分符

### 实现 Vue3 中添加 ￥ 符号并进行千分位格式化 为了在 Vue3 应用程序中实现带有 ¥ 符号的千分位格式化数字，可以采用多种方式来完成这一目标。以下是两种常见的方式： #### 方式一：使用计算属性与过滤器替代方案 由于 Vue3 已经不再支持全局过滤器，因此推荐通过组合 `computed` 属性或者自定义组件的方法来进行数据转换。 ```javascript // 在 setup 函数内部定义 computed property 或者 methods 来处理数值格式化 import { ref, computed } from 'vue'; export default { setup() { const originalAmount = ref('1234567.89'); const formattedAmount = computed(() => { let num = parseFloat(originalAmount.value.replace(/[^0-9.-]+/g,"")); return num.toLocaleString('zh-CN', { style: 'currency', currency: 'CNY' }); }); return { originalAmount, formattedAmount }; } } ``` 此代码片段展示了如何创建一个响应式的 `formattedAmount` 变量，它会自动更新当原始金额发生变化时，并应用国际化的货币格式设置[^1]。 #### 方式二：利用 Composition API 和辅助函数 另一种更灵活的做法是编写一个独立的帮助函数用于任何地方调用来执行格式化操作。 ```javascript function formatCurrency(value) { if (!value && value !== 0) return ''; try { const numberValue = new Number(String(value).replace(/,/g,'')); if (isNaN(numberValue)) throw Error(); return numberValue.toLocaleString('zh-CN', {style:'currency', currency:'CNY'}); } catch (_) { console.error(`Invalid input ${value}`); return '-'; } } // 使用该帮助函数可以在模板里直接调用 <template> <span>{{ formatCurrency(amount) }}</span> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { formatCurrency } from './utils/formatting'; // 假设这是你放置工具函数的位置 export default defineComponent({ props: ['amount'], setup(_, context) { return { ...context.attrs, formatCurrency }; // 将其暴露给 template }, }); </script> ``` 这种方式不仅保持了逻辑清晰分离而且提高了可重用性[^2]。 #### 处理输入框内的金额编辑 对于需要双向绑定并且允许用户修改的情况，则还需要考虑去除格式以便正确解析用户的输入值。这可以通过监听事件或使用 v-model 的修饰符 `.lazy`,`.trim` 等特性配合正则表达式清理非数字字符来达成目的。 ```html <input type="text" :value="originalAmount" @input="(e)=>{handleInput(e.target.value)}" /> ``` ```javascript methods:{ handleInput(newValue){ this.originalAmount = newValue.replace(/[^\d.-]/g,''); } } ``` 上述方法确保即使用户尝试粘贴带逗号或其他符号的内容也能被妥善处理成纯数字字符串形式存储下来，在显示时再重新加上合适的格式。