前端把后端数据分转换成元渲染在页面上，点击保存的时候调用API的接口元转成分vue

当使用 Vue 进行前端开发时，可以将金额单位转换的逻辑封装在一个 Vue 组件中。假设我们有一个名为 `AmountInput` 的组件，其中包含了一个 `amount` 数据属性和一个 `save` 方法，可以实现如下：

<template>
  <div>
    <label>金额：</label>
    <input v-model="yuan" @input="convertToAmount" />
    <span>元</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 0,
      yuan: 0,
    };
  },
  methods: {
    convertToYuan() {
      this.yuan = this.amount / 100; // 分转元
    },
    convertToAmount() {
      this.amount = this.yuan * 100; // 元转分
    },
    save() {
      // 调用 API 接口保存数据，传递的是 amount 数据，不需要再转换
      // ...
    },
  },
  mounted() {
    // 初始化时将后端返回的 amount 数据转换为 yuan 进行展示
    this.convertToYuan();
  },
};
</script>

在这个组件中，我们维护了两个数据属性 `amount` 和 `yuan`，分别表示以分和元为单位的金额。在组件初始化时，我们将从后端返回的 `amount` 数据转换为 `yuan` 进行展示。当用户修改了 `yuan` 数据时，我们会调用 `convertToAmount` 方法将其转换为 `amount`，并在保存时直接传递 `amount` 数据给后端API接口。