当前位置：首页 > VUE

vue实现输入金额

2026-02-17 01:10:30VUE

Vue 实现金额输入功能

金额输入是常见的表单需求，通常需要处理格式化、校验和用户交互。以下是实现金额输入的几种方法：

方法一：使用 v-model 和计算属性

通过计算属性实现双向绑定和格式化显示：

<template>
  <input v-model="displayValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      amount: 0
    }
  },
  computed: {
    displayValue: {
      get() {
        return this.amount.toFixed(2)
      },
      set(value) {
        value = value.replace(/[^0-9.]/g, '')
        this.amount = parseFloat(value) || 0
      }
    }
  },
  methods: {
    handleInput(e) {
      this.displayValue = e.target.value
    }
  }
}
</script>

方法二：使用自定义指令

创建指令自动格式化输入：

Vue.directive('money', {
  bind(el, binding, vnode) {
    el.addEventListener('input', (e) => {
      let value = e.target.value.replace(/[^0-9.]/g, '')
      vnode.context[binding.expression] = parseFloat(value) || 0
      e.target.value = value ? parseFloat(value).toFixed(2) : ''
    })
  }
})

// 使用方式
<input v-money="amount" />

方法三：第三方库

使用 vue-currency-input 等专业库：

npm install vue-currency-input

import VueCurrencyInput from 'vue-currency-input'

Vue.use(VueCurrencyInput, {
  globalOptions: {
    currency: 'CNY',
    valueAsInteger: false
  }
})

// 模板中使用
<currency-input v-model="price" />

关键处理点

过滤非数字字符：使用正则表达式移除非法输入
小数点控制：限制只能输入一个小数点
自动补零：在失去焦点时自动补全两位小数
千分位分隔：可添加逗号分隔显示（需考虑国际化）

完整示例

结合表单验证的完整组件：

vue实现输入金额

<template>
  <div>
    <input 
      ref="input"
      v-model="displayValue"
      @blur="formatValue"
      @focus="unformatValue"
    />
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      displayValue: '',
      error: ''
    }
  },
  watch: {
    value(newVal) {
      this.displayValue = this.format(newVal)
    }
  },
  mounted() {
    this.displayValue = this.format(this.value)
  },
  methods: {
    format(value) {
      return value.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    },
    unformatValue() {
      this.displayValue = this.displayValue.replace(/[^0-9.]/g, '')
    },
    formatValue() {
      const num = parseFloat(this.displayValue) || 0
      this.displayValue = this.format(num)
      this.$emit('input', num)
      this.validate(num)
    },
    validate(value) {
      this.error = value > 1000000 ? '金额不能超过100万' : ''
    }
  }
}
</script>