参考《Vue,js》实战（梁灏编著）

input-number:实战：开发一个数字输入框组件

git代码
index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 基本需求数字输入框只能输入数字，而且有两个快捷按钮，可以直接减1和加1,。除此之外，设置初始值、最大值、最小值，在数值改变时，触发一个自定义事件来通知父组件。 --><div id="app"><input-number v-model="value" :max="10" :min="0"></input-number></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script src="input-number.js"></script><script src="index.js"></script>
</body>
</html>

index.js

var app = new Vue({el: '#app',data :{value: 5}
});

input-number.js

function isValueNumber(value) {  return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1})$/).test(value+'');
}Vue.component('input-number',{template: '\<div class="input-number">\<input \type="text"\:value="currentValue"\@change="handleChange">\<button \@click="handleDown"\:disabled="currentValue<=min">-</button>\<button \@click="handleUp"\:disabled="currentValue>=max">+</button>\</div>',props:{max:{type: Number,default: Infinity},min:{type: Number,default: -Infinity},value:{type: Number,default: 0}},data:function(){return {currentValue: this.value}},watch:{currentValue:function(val){this.$emit('input',val);this.$emit('on-change',val);},value:function(val){this.updateValue(val);}},methods:{handleDown:function(){if (this.currentValue<=this.min) return;this.currentValue--;},handleUp:function(){if(this.currentValue>=this.max) return;this.currentValue++;},handleChange:function(){var val=event.target.value.trim();var max=this.max;var min=this.min;if(isValueNumber(val)){val=Number(val);this.currentValue=val;if(val>max){this.currentValue=max;}else if(val<min){this.currentValue=min;}}else{event.target.value=this.currentValue;}},updateValue:function(val){if(val>this.max) val=this.max;if(val<this.min) val=this.min;this.currentValue=val;}},mounted:function () {this.updateValue(this.value);}
});

Vue.js学习笔记—input-number:实战：开发一个数字输入框组件相关推荐

Vue.js学习笔记—sort-table：实战：使用Render函数开发可排序的表格组件
参考<Vue,js>实战(梁灏编著) sort-table:实战:使用Render函数开发可排序的表格组件 index.html <!DOCTYPE html> <htm ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...

Vue.js学习笔记—input-number:实战：开发一个数字输入框组件

input-number:实战：开发一个数字输入框组件

Vue.js学习笔记—input-number:实战：开发一个数字输入框组件相关推荐

最新文章

热门文章