vue input 只能输入数字且开头第一位数不能为0

置顶 Frontend-Arway

已于 2022-03-09 18:08:46 修改

阅读量9.6k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： javascript css vue.js html5 css3

于 2020-06-01 17:07:00 首次发布

本文链接：https://blog.csdn.net/weixin_44939080/article/details/106476986

js 同时被 2 个专栏收录

16 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

本文介绍如何在Vue中实现一个输入框，该输入框仅允许用户输入数字，并确保数字不以零开头。通过使用@input事件监听和正则表达式，我们可以在用户输入时实时进行校验和修正。

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

vue input 只能输入数字且开头第一位数不能为0

HTML页面写一个@input事件监听用户输入

<template>
			<div class="orderpayment_number">
				<div>购买数量:</div>
				<div>
					<input type="text" placeholder="输入购买数量" v-model="number" @input="handleInput" />
				</div>
			</div>
</template>

Js 部分使用replace方法与正则表达式匹配

export default {
		data: function() {
			return {
				number: ''
			}
		},
		methods: {
			handleInput(e) {
				this.number = e.target.value.replace(/\D/g, '').replace(/^0{1,}/g, '');
			}
	},