监听input @input

最新推荐文章于 2024-01-25 09:47:55 发布

启动出bug

最新推荐文章于 2024-01-25 09:47:55 发布

阅读量288

点赞数

文章标签：小程序前端 uni-app

这篇博客主要探讨了在前端开发中如何处理输入的数字格式，确保输入值始终保留两位小数，并展示了如何监听并格式化输入的银行卡号，使其符合四位分隔的规范。通过`@input`事件和`watch`监听，实现了实时的输入验证和格式转换。

摘要由CSDN通过智能技术生成

//input 两位小数
//input 保持两位小数

//input 两位小数
//input 保持两位小数
<input type="number" @input="inputChange" v-model=" xxx">

inputChange(e) {
	var that = this
	e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
	this.$nextTick(() => {
		that.xxx= e.target.value
	})
},

监听input 银行卡四位空格

<input type="text" placeholder-style="color:#909399;font-size:28rpx;"  v-model="xxx" @input="inputCard"/>	//@input="inputCard"监听input变化

watch: {
        ['refueling_card'](val) {
            this.$nextTick(() => {
            this.xxx = val.replace(/\D/g,'').replace(/....(?!$)/g,'$& ');
            });
        }
},