华为鸿蒙 数据算法 npm grails ios5 oracle查询数据库 linux查看jdk安装路径 java中的多态 java学习教程 java读取文件内容 java集合遍历 java格式化字符串 java中collection java语言运算符 java函数调用 java程序设计教程 php案例 磁盘分区软件 matlab2016a安装教程 销售单软件 eclipse中文版下载 键盘指法练习软件 批处理if 多面硬币 修改ip地址软件 js正则匹配字符串 php正则匹配 linux安卓模拟器 视频添加水印 c程序 oemdiy 视频字幕制作软件 win98序列号 黑客攻防技术宝典 Mapper oracle游标 搜狐影音播放器 田字格字体 任务管理软件 数据库同步解决方案
当前位置: 首页 > 学习教程  > 编程语言

vue表单实现输入框控制输入小数点后两位

2020/12/28 19:30:06 文章标签:

首先思路要清晰,如何控制只输入两位小数 1、我们可以把小数点后面的数字长度用maxlength来控制 2、要做到上一步,可以通过split(’.’)这个方法,以来将字符串分割成数组 3、拿到数组的第二个元素,即index为1的元素 4、如果这个元素…

首先思路要清晰,如何控制只输入两位小数
1、我们可以把小数点后面的数字长度用maxlength来控制
2、要做到上一步,可以通过split(’.’)这个方法,以·来将字符串分割成数组
3、拿到数组的第二个元素,即index为1的元素
4、如果这个元素长度是2,那么我们就可以把整个字符串的长度设置为最大长度,否则将maxlength重置

注意 该方法必须写在监听中

接下来直接上代码

<u-form-item :label-position="labelPosition" label="定价" prop="price" :label-width="labelWidth" :required="rules.price[0].required">
		<u-input :border="border" :placeholder="rules.price[0].message" v-model="model.price" type="digit" @input="keyInput" :maxlength="moneyMaxLeng"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="销售价" prop="salePrice" :label-width="labelWidth" :required="rules.salePrice[0].required">
		<u-input :border="border" :placeholder="rules.salePrice[0].message" v-model="model.salePrice" type="digit" @input="keyInput" :maxlength="moneyMaxLeng"></u-input>
</u-form-item>

只是我的表单输入框的代码,type="digit" @input="keyInput" :maxlength="moneyMaxLeng"这几个属性是关键,@input是对表单项添加监听事件,maxlength控制输入的位数,事件的监听方法如下

keyInput(e) { //过滤input密码类型只输入数字
				console.log('e', e)
				let val = e;
				if(val.includes(".")){
					let numDian = val.toString().split(".")[1].length
					if(numDian === 2){
						this.moneyMaxLeng = val.length
					}else{
						this.moneyMaxLeng = 140
					}
					console.log("numDian",numDian);
				}
				console.log('val', val)
			},

代码具体意义自己领会一下,其实很简单的逻辑,并没有什么难度


本文链接: http://www.dtmao.cc/news_show_550268.shtml

附件下载

上一篇:web攻击

下一篇:H5中的a标签

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?