Vue只能输入数字

最新推荐文章于 2025-07-31 16:47:10 发布

weixin_34077371

最新推荐文章于 2025-07-31 16:47:10 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bf4bc7de51d4539921c2772

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>

		<div id="demo">
			<input type="text" placeholder="只能输入正整数" @input="change" @change="change" :value="inpNum" />
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#demo',
				data: {
					oldNum: ''
				},
				computed: {
					inpNum() {
						return this.oldNum
					}
				},
				methods: {
					change(event) {
						let val = event.target.value.trim()
						// 只能是正整数或空,可根据需求修改正则   
						//item = e.target.value.replace(/[^\d]/g,'')
						if(/^[1-9]\d*$|^$/.test(val)) {
							this.oldNum = val
						} else {
							event.target.value = this.oldNum
						}
					}
				}
			})
		</script>

	</body>

</html>
复制代码