Vue input实现只输入整数或者小数点后面4位

需求：金额单位，可以输入整数或者小数，但是最多输入小数点后面四位
基于pug模板的vue实现：

<template lang="pug">
  input(type="number" v-model="bean.unit_price = (String(bean.unit_price).indexOf('.') + 1 > 0 && ( String(bean.unit_price).length - (String(bean.unit_price).indexOf('.') + 1) > 4)) ? parseFloat(bean.unit_price).toFixed(4) :bean.unit_price" )
</template>

分析：
v-model="bean.unit_price= xxx",这个格式是设置bean.unit_price为input的输入值(双向绑定的),但是真正的值是xxx。
上面代码太长了，不方便阅读，我拆分下，xxx是下面这部分：

(String(bean.unit_price).indexOf('.') + 1 > 0 && ( String(bean.unit_price).length - (String(bean.unit_price).indexOf('.') + 1) > 4)) ? parseFloat(bean.unit_price).toFixed(4) : bean.unit_price

拆分三目运算符： isXiaoshuAndHaveFourPoint ? HandleXiaoshuA : unHandleB

?前面的判断条件 isXiaoshuAndHaveFourPoint是下面的代码：

(String(bean.unit_price).indexOf('.') + 1 > 0 && ( String(bean.unit_price).length - (String(bean.unit_price).indexOf('.') + 1) > 4))

这一部分是判断当前输入值是否小数；如果是小数，小数点后面有多少位
1.判断是否小数：

boolean isDecimals = (String(bean.unit_price).indexOf('.') + 1 > 0

2.判断小数点后面有几位：

let point = ( String(bean.unit_price).length - (String(bean.unit_price).indexOf('.') + 1) 

3.如果是小数，而且小数点后面超过四位：

let isXiaoshuAndHaveFourPoint =  ((String(bean.unit_price).indexOf('.') + 1 > 0) &&  ( String(bean.unit_price).length - (String(bean.unit_price).indexOf('.') + 1)  > 4

？后面的HandleXiaoshuA

4.如果超过四位数，手动删除掉，再重新赋值：

let HandleXiaoshuA = parseFloat(bean.unit_price).toFixed(4)

5.如果不是小数不用处理，所以

let unHandleB = bean.unit_price