Vue.js 是一个用于构建用户界面的渐进式框架。 它采用自下而下的增量开发设计。 与其他库或现有项目集成特别容易。 与相关工具和支持库配合使用时，可以完美集成。 为复杂的单页应用程序提供支持。
本系列所有Vue.js代码均基于Vue.js2.6.11，在IntelliJ IDEA2019.2.3环境下编译，并在最新版本的“搜狗高速浏览器”和“谷歌Chrome浏览器”中测试成功。 所有源码无需下载Vue.js的其他文件，只需在测试或使用过程中保持网络畅通即可。
下面的示例演示了如何使用 v-model.number 来转换值。
01
实例函数
本例主要利用v-model中的number修饰符来实现控制输入框中字符类型数据转换为数值类型的效果。 当页面在浏览器中显示时，由于“商品总价：”输入框仅使用v-model，因此，一旦在输入框中输入非数字数据（如3K），“应付款” amount :" 结果会出现 NaN（NotaNumberjavascript数据转换，不是数字）错误，如图 1 所示。
■图1
因为“购买数量：”输入框使用的是数字修饰符，即v-model.number，因此，如果第一次在输入框中输入数字（如20），则会更新实时为Number类型的值； 在数字后输入其他非数字字符（如20K），则该值（也可以想到“应付金额：”结果）将不再改变（保留非数字字符前的值），如图图2中，但是在这个输入框失去焦点时，手动删除非数字字符（即20K变成20）； 如果第一次在“购买数量：”输入框中输入非数字字符串（如K），因为Vue. 字符串（如K）转换为值，因此“应付金额：”结果也会出现NaN错误javascript数据转换，尽管之前输入的数字（如K20）也会被视为字符串。
■图2
02
实现代码
前面的代码中，v-model.number的number修饰符主要是用来控制非数字字符（输入框的）和数字字符（Vue.js的）的转换，以及转换输入框的字符类型数据输入框输入值。
此示例的源文件是 MyCodeChapDChapD038.html。
03
源码下载
关注陌陌公众号，后台回复关键字“Vue.js代码195”即可获取完整源码。
*测试代码时，网络必须保持畅通。
04
相关书籍
《Bootstrap+Vue.js后端开发超实用代码合集》
国际标准书号：978-7-302-56815-5
罗帅、罗斌编
价格：99.8元
扫描二维码购买书籍
