Vue.js 表单自动计算费用 - 根据收入动态调整费用

<template>
  <div>
    <el-form :model="form" label-width="80px">
      <el-form-item label="收入:" prop="income" style="margin-left: -5px">
        <el-input
          v-model.number="form.income"
          placeholder="请输入收入"
          clearable=""
          @input="caltaxExemptIncome"
        />
      </el-form-item>
      <el-form-item label="费用：" prop="cost" style="margin-left: -40px">
        <el-input
          v-model.number="form.cost"
          placeholder="请输入费用"
          :disabled="isEditing"
          clearable=""
          @input="caltaxExemptIncome"
        />
      </el-form-item>
      <el-form-item label="免税收入:" prop="taxExemptIncome">
        <el-input
          v-model="form.taxExemptIncome"
          placeholder="请输入免税收入"
          :disabled="isEditing"
          clearable=""
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        income: 0,
        cost: 0,
        taxExemptIncome: 0
      },
      isEditing: false
    };
  },
  methods: {
    caltaxExemptIncome() {
      if (this.form.income <= 4000) {
        this.form.cost = 800;
      } else {
        this.form.cost = this.form.income * 0.2;
      }
    }
  }
};
</script>
<p>在上述代码中，<code>caltaxExemptIncome</code> 方法用于根据收入计算费用。根据题目要求，如果收入不超过4000元，则费用为800元；如果收入超过4000元，则费用按收入的20%计算。在 <code>el-input</code> 中的 <code>@input</code> 事件监听中调用了 <code>caltaxExemptIncome</code> 方法，以实时更新费用。</p>
<p>注意：上述代码为Vue组件的单文件组件，需要在Vue项目中使用。如果想要单独运行这段代码，需要引入Vue.js库，并将代码放在Vue实例中执行。</p>