vue v-model.number 和 type=“number“详解

1、v-model.number详解

在这里插入图片描述
vue v-model.number 和 type=“number“详解_第1张图片

在这里插入图片描述
当两个input都输入非数字时,v-model.number和v-model的值都不会转为Number类型
vue v-model.number 和 type=“number“详解_第2张图片

在这里插入图片描述
当两个input都输入数字时,v-model.number的值会转为Number类型,v-model的值还是String类型
vue v-model.number 和 type=“number“详解_第3张图片

(注意:change方法的回调参数val,都是string类型)

在这里插入图片描述

2、type=“number”

当el-input没有指定type值时,默认为type=“text”
在这里插入图片描述
vue v-model.number 和 type=“number“详解_第4张图片
当设置type="number"后,el-input内只能输入数字
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
vue v-model.number 和 type=“number“详解_第5张图片
type="number"唯一的作用就是限制input框内只能输入数字。即便输入的是数字,但val和v-model的值仍然是string类型

你可能感兴趣的:(html)