1、template：提前安装iview,主要使用iview相关控件

    1. <template>
    2.   <div class="test">
    3.     <Button @click="add">增加</Button>
    4.     <Modal v-model="Model"
    5.            :closable="false"
    6.            :mask-closable="false">
    7.       <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
    8.         <FormItem label="报销金额" prop="reimburseAmount">
    9.           <Input v-model="formValidate.reimburseAmount" style="width: 320px" placeholder="请输入报销金额..."></Input>
    10.         </FormItem>
    11.         <FormItem label="税率 ( % )" prop="taxRate" :rules="{ required: true, message: '税率不能为空，请输入'}">
    12.           <InputNumber
    13.             :max="100"
    14.             :min="1"
    15.             v-model="formValidate.taxRate"
    16.             style="width: 320px;"
    17.             placeholder="请输入税率..."
    18.             :formatter="value => `${value}%`"
    19.             :parser="value => value.replace('%', '')">
    20.           </InputNumber>
    21.         </FormItem>
    22.         <FormItem label="税额" prop="taxAmount" :rules="{ required: true, message: '税额不能为空且小数点后只能保留2位，请输入'}">
    23.           <InputNumber
    24.             v-model="formValidate.taxAmount"
    25.             style="width: 320px"
    26.             placeholder="请输入税额...">
    27.           </InputNumber>
    28.         </FormItem>
    29.       </Form>
    30.       <div slot="footer">
    31.         <Button  @click="Cancel">取消</Button>
    32.         <Button type="primary" @click="Submit('formValidate')">确定</Button>
    33.       </div>
    34.     </Modal>
    35.   </div>
    36. </template>

    2、data：主要定义需要用到的一些属性

    1. data () {
    2.   // 验证报销金额
    3.   const validateReimburseAmount = (rule, value, callback) => {
    4.     let reg = /^\d+(?:\.\d{1,2})?$/
    5.     if (!reg.test(value)) {
    6.       callback(new Error('报销金额只能保留两位小数，请重新输入'))
    7.     } else {
    8.       callback()
    9.     }
    10.   }
    11.   return {
    12.     Model: false,
    13.     formValidate: {
    14.       reimburseAmount: 0,
    15.       taxRate: 0,
    16.       taxAmount: 0
    17.     },
    18.     ruleValidate: {
    19.       reimburseAmount: [
    20.         { required: true, message: '报销金额不能为空，请输入', trigger: 'blur' },
    21.         {validator: validateReimburseAmount, trigger: 'blur'}
    22.       ]
    23.     }
    24.   }
    25. }

    3、computed :计算当前控件的值

    1. computed: {
    2.   reimburseAmounts () {
    3.     return this.formValidate.reimburseAmount
    4.   },
    5.   taxRates () {
    6.     return this.formValidate.taxRate
    7.   },
    8.   taxAmounts () {
    9.     return this.formValidate.taxAmount
    10.   }
    11. }

    4、watch : 监听报销金额和税率变化的时候，得到的税额

    1. watch: {
    2.   reimburseAmounts (n, o) {
    3.     // console.log("reimburseAmounts", n, o)
    4.     this.formValidate.taxAmount = n * (this.formValidate.taxRate / 100)
    5.     this.formValidate.taxAmount = parseFloat(this.formValidate.taxAmount.toFixed(2))
    6.   },
    7.   taxRates (n, o) {
    8.     // console.log("taxRates", n, o)
    9.     this.formValidate.taxAmount = this.formValidate.reimburseAmount * (n / 100)
    10.     this.formValidate.taxAmount = parseFloat(this.formValidate.taxAmount.toFixed(2))
    11.   },
    12.   taxAmounts (n, o) {    
    13.     // console.log("taxAmounts", n, o)
    14.     this.formValidate.taxAmount = parseFloat(this.formValidate.taxAmount.toFixed(2))
    15.   }
    16. }

    5、methods ： 一些操作方法

    1. methods: {
    2.   add: function () {
    3.     let self = this
    4.     self.Model = true
    5.   },
    6.   Cancel: function () {
    7.     let self = this
    8.     self.Model = false
    9.   },
    10.   Submit: function (name) {
    11.     let self = this
    12.     console.log(self.formValidate.taxAmount)
    13.   }
    14. }