number类型的input标签的value值取到后是string类型

最新推荐文章于 2025-05-17 14:56:25 发布

Freya_yyy

最新推荐文章于 2025-05-17 14:56:25 发布

阅读量8.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：问题解决方案文章标签： number类型的input标签的value值取到后是str

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Freya_yyy/article/details/84839815

问题解决方案专栏收录该内容

8 篇文章

订阅专栏

本文解决了一个在使用Vue2.0实现分页功能时遇到的bug，即跳转后页面显示页数异常增多的问题。通过分析发现，原因是number类型的input标签获取的value值默认为string类型，需转换为number类型。文章提供了代码示例，演示了如何使用Number()、parseInt()和parseFloat()方法进行类型转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在修改之前写的用Vue2.0实现简单的分页及跳转的博客时，一直遇到跳转之后页面显示页数增多的问题。之后才发现原来是number类型的input标签的value值取到后是string类型的，使用时需要先将其转换为number类型。否则后续会出错。举个简单的栗子。

<input type="number" class="jumppage" />
<a class="jumpbtn" v-on:click="pageSkip()">跳转</a>

var skipPage = document.getElementsByClassName("jumppage")[0].value;
console.log(typeof skipPage);  //string
var skipPage2 = Number(document.getElementsByClassName("jumppage")[0].value);
console.log(typeof skipPage2);  //number

如代码段2所示，使用Number()方法转换数据类型。

当然这里我们也可以使用parseInt(),parseFloat()方法进行显示数据类型转换。