本文实例为大家分享了Vue.js数字输入框组件的具体实现代码，供大家参考，具体内容如下

效果

入口页index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title数字输入框组件/title/head body div id=' app ' input-number v-model=' value ' : max=' 10 ' :min=' 0 '/input-number/div script src=' http :3359 unpkg。com/vue/dist/vue。js '/script script src=' http :输入-数字。js '/script script src=' http 3360索引。js '/脚本/正文/html数字输入框组件输入-number.js

函数isvaluenumber(value){ return(/(^-？[0-9] .{1}d $) | (^-？[1-9][0-9]*$) | (^-?0{1}$)/).测试（值' ');}Vue.component('input-number '，{ template : ' div class=' input-Number ' input type=' text ' : value=' current value ' @ change=' handleChange ' button @ click=' handleDown ' : disabled=' current value=max '/button /div '，props: { max:这个$emit('on-change '，val)；}，值：函数{这个。update value(val)；} }，methods: { updateValue:函数(瓦尔){如果(瓦尔这个。max)val=这个。max如果(重视这一点。min)val=这个。分钟；this.currentValue=val}，handleDown:函数(){ if(this。当前值=这个。最小)返回；这个。current value-=1；}，handleUp:函数(){ if(this。当前值=这个。最大值)返回；这个。current value=1；}，handleChange:函数（事件){ var val=event。目标。价值。trim()；var max=this . maxvar min=this . minif(isValueNumber(val)){ val=Number(val)；this . CurrentValue=valif(val max){ this。currentvalue=max} else if(val min){ this。currentvalue=min} } else { event。目标。值=这个。currentvalue} } }，挂载ed :函数(){ this。updatevalue(这。值)；}});根实例

var app=new Vue({ el: '#app '，数据： { value : 5 } })；更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。