看到这个标题好像很简单,失去焦点事件,onchange事件都能做的到,但是用户体验感貌似很差。查了下百度查不到资料了。看了下vue的基础,发现vue有个watch 监听器好吧,从这里入手用v模型加看就可以很简单的实现这一个功能。
- - - - -代码省略
& lt;输入id=" amt " type="数量" v模型="数量"/比;
- - - - -代码省略
数据:{
返回{
数量:"
}
}
- - - - -代码省略
看:{
数量(newVal oldVal) {
console.log (newVal)
var reg=/^ (\ d {0 8}) (\。(\ d{0, 2})) & # 63;美元/克;
如果(! reg.test (newVal)) {
如果(newVal==") {
这一点。数量=";
返回;
}
这一点。数量=oldVal
其他}{
这一点。数量=newVal;
}
}
}
& lt;输入类型=拔谋尽闭嘉环?扒胧淙虢鸲睢皏模型=皁rderMoney @input”=癱heckInput”/比;
checkInput () {
这一点。orderMoney=this.dealInputVal (this.orderMoney);
}，
dealInputVal(值){
值=https://www.yisu.com/zixun/value.replace (/^ 0 * (0/ (1 - 9))/,“$ 1”);
值=https://www.yisu.com/zixun/value.replace (/(^/d)/g, " ");//清除“数字”和“。”以外的字符
值=https://www.yisu.com/zixun/value.replace (/^/g, " ");//验证第一个字符是数字而不是字符
值=https://www.yisu.com/zixun/value.replace (/{1,}/g,“。”);//只保留第一个。清除多余的
值=https://www.yisu.com/zixun/value
.replace (”。”、“#”)美元
.replace (/\。/g”、“)
.replace (" $ # $”、“。”);
值=https://www.yisu.com/zixun/value.replace (/^ (/) * (/d *)/(/d/d)。*/美元,1美元2美元。3美元);//只能输入两个小数
值=在https://www.yisu.com/zixun/value.indexOf (“。”);0
& # 63;value.split (“。”) [0]。substring (0, 10) +”。”+ value.split (“。”) [1]
:价值。substring (0, 10);
返回值;
}
以上所述是小编给大家介绍的vue限制输入框只能输入8位整数和2位小数的代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
