用户登录

现在这个组件里有个文本框元素,在这个元素上用 v-model 绑定了一个数据叫 content。 现在这个数据默认的值是数字 0。

在这个元素上面,先绑定一个 change 事件,事件的处理器设置成 onChangeContent。然后在这个组件里添加一个 created 生命周期方法,在控制台上可以输出组件里的 content 这个数据的值的类型,用 typeof 检查 this.content 这个数据的类型。

在组件的方法里面,再添加一个 onChangeContent, 这个方法是文本框元素上的 change 事件的处理方法。在这个方法里面,可以在控制台上输出组件里的 content 这个数据的类型,用 typeof 检查 this.content 这个数据的类型。

回到浏览器检查一下,组件被创建以后,会在控制台上输出组件里的 content 这个数据的类型,这里显示它的类型是 number ,也就是数字。

下面再修改一下文本框元素的值,输入一个新的数字,按下回车。元素值发生变化以后,你会发现组件里的 content 这个数据的类型就变成了 string。

如果你想保留原有的数据类型,可以这样,在这个 v-model 的后面加上一个 number 修饰符。

再回到浏览器测试一下,修改一下文本框元素里的值,确定一下。这次你会发现,文本框的值发生变化以后,组件里的 content 这个数据的值的类型仍然是 nubmer,也就是数字类型的值。

v-model 的修饰符:.number《 Vue.js 前端应用 #3:表单元素 》

统计

12921
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点