使用v-model.number遇到的问题（小数点后边无法输入0）

问题：用户在输入金额的时候发现输入不上0.04，后来在用户提出这个问题后我发现，输入的数字中只要小数点后边带有0的都输入不上，例如：1.023、5.2306、8.2405。

开发环境：vue + elementui

使用v-model.number的原因：在el-input的输入框中我限制了输入框的type="number"，致使用户只能输入数字，不能输入其他还有字符的情况，但是在获取这个变量时，获取的却是字符串类型，因此需要类型转换，使用v-model.number后，可以避免这个问题，但是紧接着也迎来了新的问题。

<el-form-item label="总合同额（元）" :label-width="formLabelWidth">
	<el-input type="number" v-model.number="qkListform.zhte" disabled placeholder="请输入项目总合同额" ></el-input>
</el-form-item>

我在网上找了很多文章和资料，都没有发现有明确解决这个问题的方法，在此我列举几项我的解决思路，大家如果有好的解决方法也可以在评论区告诉我。

方法一：使用parseFloat()进行类型转换

将v-model.number改成v-model,在获取数据的时候需要手动转换下，比如上文中我的变量获取需要改写成parseFloat(this.qkListform.zhte)，这样就可以了，如果需要判断下用户如果不输入需要默认更改成0，可以使用三目判断：this.qkListform.zhte ? parseFloat(this.qkListform.zhte) : 0

方法二：设置css样式

经过测试发现，如果将el-input标签更改成原生的input标签，则不存在小数点后边0输入不上的问题，此时需要在css文件中设置input输入框的样式，将input设置为el-input一样的样式即可，就可以避免这个问题

方法三：输入方式更改

其实这个也不能算是一种解决方法，只是这样输入小数点后边可以输入0，大家可以测试一下，比如输入0.04，在输入框中可以先输入0.4，在将光标移到4的前边输入0，这样也算是可以解决这个问题，但这个方案还是要看系统面向的用户

方法四：直接去掉.number

这里就需要测试了，看看你直接输入v-model获取的数字值你是否可以直接使用，比如说保存的时候需要将数据传递到数据库中是否可以直接存取，报不报错，如果不报错的话直接去掉.number就可以了，不需要改其他地方

我在项目中是使用了方法一和方法四，但是为了避免出现其他的问题，我还是建议大家在解决过程中可以使用方法一和方法二。

大家如果有更好的解决方案，欢迎在评论区中说出你的思路，后期如果有更好的解决方法，我也会及时更新的。