需求:金额单位,可以输入整数或者小数,但是最多输入小数点后面四位
基于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