在 Vue 前端项目开发的过程中，经常会遇到后端使用的金额单位是“分”，而用户输入的金额单位是“元”，就会需要在获取数据跟提交数据的时候手动对数据做计算，显得比较繁琐，代码结果也比较乱，所以可以封装一个组件来完成单位的转换

• 新建文件

PriceInput.vue

<script setup>
const modelValue = defineModel("modelValue", {
  set: (v) => {
    if (!v) {
      return v
    }
    return v * 100
  },
  get: (v) => {
    if (!v) {
      return v
    }
    return (parseFloat(v) / 100)
  }
})
</script>

<template>
  <el-input-number v-model="modelValue" v-bind="$attrs"/>
</template>

<style scoped lang="less">
</style>

• 使用案例

双向绑定的金额为“分”，组件实际展示和编辑的金额单位为“元”，与 el-input-number 组件完成兼容

<price-input
  v-model="form.price"
  :precision="2"
  :step="0.1"
  :min="0"
  controls-position="right"
/>