Vue中如何为type="number"输入框自动添加千分位逗号？

首先得明确一点：原生的type="number"输入框没办法直接显示千分位逗号，因为它的绑定值是数字类型，而带逗号的是字符串格式，两者不兼容。不过我们可以通过切换输入框类型为text，配合计算属性或自定义指令来实现“显示千分位+绑定纯数值”的效果，同时还能保留你原本的数字验证和禁止日文输入的逻辑。

下面给你两种实用的解决方案：

方案一：使用计算属性做双向绑定转换 #

这种方式适合单个输入框的场景，逻辑清晰直观：

1. 把ui-textbox的type从number改成text，这样才能显示带千分位的字符串；
2. 创建一个计算属性，负责“格式化显示值”和“解析纯数值”的双向转换；
3. 调整你的isNumber方法，确保只允许数字、小数点和必要的控制键输入，同时禁止日文。

<template>
  <ui-textbox 
    label="initial" 
    v-model="formattedInitialCost" 
    name="initial_cost" 
    v-validate="`numeric|decimal`" 
    type="text" 
    @keydown="isNumber" 
    :maxlength="18" 
    :enforceMaxlength="true" 
    format="number"
  ></ui-textbox>
</template>

<script>
export default {
  data() {
    return {
      initial_cost: 0.00
    };
  },
  computed: {
    formattedInitialCost: {
      // 获取值时：把纯数字格式化成带千分位的字符串
      get() {
        if (this.initial_cost == null) return '';
        // 用toLocaleString自动添加千分位，同时保留两位小数
        return this.initial_cost.toLocaleString('en-US', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        });
      },
      // 设置值时：把带千分位的字符串转成纯数字
      set(formattedValue) {
        // 移除所有逗号，转成数字
        const pureNumber = formattedValue.replace(/,/g, '');
        this.initial_cost = pureNumber ? parseFloat(pureNumber) : 0.00;
      }
    }
  },
  methods: {
    isNumber(evt) {
      // 允许的按键：数字、小数点、退格/删除、方向键
      const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', '.', ...Array.from({length:10}, (_,i) => `${i}`)];
      
      // 禁止日文和其他非法字符
      if (!allowedKeys.includes(evt.key) && !evt.ctrlKey) {
        evt.preventDefault();
      }
      
      // 限制只能输入一个小数点
      if (evt.key === '.' && evt.target.value.includes('.')) {
        evt.preventDefault();
      }
    }
  }
};
</script>

方案二：自定义指令（适合多个输入框复用） #

如果你的项目里有多个需要千分位格式化的输入框，自定义指令会更高效，不用重复写计算属性：

1. 先注册一个全局自定义指令v-number-format；
2. 把输入框改成type="text"，加上指令即可。

// 在main.js或者你的指令文件里注册全局指令
Vue.directive('number-format', {
  bind(el, binding, vnode) {
    // 找到输入框元素（如果ui-textbox是组件，需要内部包含input标签）
    const inputEl = el.tagName === 'INPUT' ? el : el.querySelector('input');
    
    // 格式化显示值的函数
    const formatToThousands = (value) => {
      if (!value) return '';
      return parseFloat(value).toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    };
    
    // 解析纯数字的函数
    const parseToPureNumber = (formattedValue) => {
      return formattedValue.replace(/,/g, '');
    };
    
    // 初始化显示格式化后的值
    inputEl.value = formatToThousands(vnode.context[binding.expression]);
    
    // 输入时自动格式化
    inputEl.addEventListener('input', () => {
      const pureNum = parseToPureNumber(inputEl.value);
      // 更新绑定的数值
      vnode.context[binding.expression] = pureNum ? parseFloat(pureNum) : 0.00;
      // 重新格式化显示
      inputEl.value = formatToThousands(pureNum);
    });
    
    // 失去焦点时确保格式正确（比如用户手动删除逗号后自动补回）
    inputEl.addEventListener('blur', () => {
      inputEl.value = formatToThousands(vnode.context[binding.expression]);
    });
  }
});

然后在组件里使用：

<ui-textbox 
  label="initial" 
  v-model="initial_cost" 
  name="initial_cost" 
  v-validate="`numeric|decimal`" 
  type="text" 
  @keydown="isNumber" 
  :maxlength="18" 
  :enforceMaxlength="true" 
  v-number-format
></ui-textbox>

关键说明 #

• 为什么要改成type="text"？因为type="number"的输入框只接受纯数字值，带逗号的字符串会被解析成NaN，无法正常显示；
• 两种方案都能保证initial_cost始终是纯数字类型，不影响你的表单验证和后续逻辑；
• isNumber方法里的逻辑可以继续保留，确保用户无法输入日文或其他非法字符。

内容的提问来源于stack exchange，提问作者user6632933