本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下
效果
入口页index . html
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title>数字输入框组件& lt;/title>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;输入数v模型=凹壑怠?max=?0”: min=" 0 "祝辞& lt;/input-number>
& lt;/div>
& lt;脚本src=" https://unpkg.com/vue/dist/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/input-number.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/index.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
数字输入框组件input-number.js
函数isValueNumber(价值){
返回(/(^ & # 63;[0 - 9]+ \。{1}\ d + $) |(^ & # 63;[1 - 9][0 - 9] *美元)|(^ & # 63;0美元{1})/)。测试(价值+”);
}
Vue.component(输入数,{
模板:“\
& lt; div类="输入数"祝辞\
输入\ & lt;
type=" text " \
:value=" https://www.yisu.com/zixun/currentValue " \
@change=" handleChange "祝辞\
& lt;按钮\
@click=\“handleDown”
:禁用=" currentValue & lt;=min”祝辞& lt;/button> \
& lt;按钮\
@click=\“handleUp”
:禁用=" currentValue祝辞=max "祝辞+ & lt;/button> \
& lt;/div>”
道具:{
马克斯:{
类型:数字,
默认值:无穷
},
分钟:{
类型:数字,
默认值:无穷
},
价值:{
类型:数字,
默认值:0
}
},
数据:函数(){
返回{
currentValue: this.value
}
},
看:{
currentValue:函数(val) {
这一点。美元发出(“输入”,val);
美元。排放(“变化”,val);
},
价值:函数(val) {
this.updateValue (val);
}
},
方法:{
updateValue:函数(val) {
如果(val比;this.max)
val=this.max;
如果(val & lt;this.min)
val=this.min;
这一点。currentValue=https://www.yisu.com/zixun/val;
},
handleDown:函数(){
如果这一点。currentVaule <=this.min)
返回;
这一点。currentValue -=1;
},
handleUp:函数(){
如果这一点。currentVaule>=this.max)
返回;
这一点。currentValue +=1;
},
handleChange:函数(事件){
var val=event.target.value.trim ();
var max=this.max;
var min=this.min;
如果(isValueNumber (val)) {
val=数量(val);
这一点。currentValue=val;
如果(val> max) {
这一点。currentValue=max;
}else if (val
根实例
应用var=new Vue ({
埃尔:“#应用”,
数据:{
值:5
}
});
更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
