value数字 vue_Vue数字输入框组件使用方法详解
前面的话
关于基础组件介绍,已经更新完了。这篇文章将用组件基础知识开发一个数字输入框组件。将涉及到指令、事件、组件间通信。
基础需求
只能输入数字
设置初始值,最大值,最小值
在输入框聚焦时,增加对键盘上下键的支持
增加一个控制步伐prop-step,例如,设置为10 ,点击加号按钮,一次增加10
项目搭建
在了解需求后,进行项目的初始化:
Document
Vue.component('input-number',{
template: `
-
+
`}
var app = new Vue({
el:'#app'
})
初始化结构搭好后,由于要设置初始值,最大值、最小值,我们在父组件中的 < input-number>< /input-number>上设置这些值,并且通过Props将父组件数据传递给子组件
父组件中添加数据:value是一个关键的绑定值,所以用v-model,实现双向绑定。
在子组件中添加props选项:
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
我们知道,Vue组件时单项数据流,所以无法在子组件上更改父组件传递的数据,在这里子组件只改变value值,所以我们给子组件设置一个data数据,默认引用value值,然后在组件内部维护这个data。
data() {
return{
// 保存初次父组件传递的数据
currentValue : this.value,
}
}
并且给子组件的input元素绑定value
这样只解决了初始化时引用父组件value的问题,但是如果父组件修改了value,子组件无法感知,我们想要currentValue一起更新。那么就要使用wacth监听选项监听value。
当父组件value发生变化时,子组件currentValue也跟着变化。
当子组件currentValue变化时,使用$emit触发v-model,使得父组件value也跟着变化
watch: {
// 监听属性currentValue与value
currentValue(val) {
// currentValue变化时,通知父组件的value也变化
this.$emit('input', val);
},
value(val) {
// 父组件value改变时,子组件currentValue也改变
this.updataValue(val);
}
},
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
}
},
// 第一次初始化时,也对value进行过滤
mounted: function() {
this.updataValue(this.value);
}
上述代码中,生命周期mounted钩子也使用了updateValue()方法,是因为初始化时也要对value进行验证。
父子间的通信解决差不多了,接下来完成按钮的操作:添加handleDown与handleUp方法
template: `
-
+
`,
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
},
// 点击减号 减10
handleDown() {
if(this.currentValue < this.min) return
this.currentValue -= this.prop_step;
},
// 点击加号 加10
handleUp() {
if(this.currentValue < this.min) return
this.currentValue += this.prop_step;
},
当用户在输入框想输入具体的值时,怎么办?
为input绑定原生change事件,并且判断输入的是否数字:
在methods选项中,添加handleChange方法:
// 输入框输入值
handleChange(event) {
var val = event.target.value.trim();
var max = this.max;
var min = this.min;
if(isValueNumber(val)) {
val = Number(val);
if(val > max) {
this.currentValue = max;
}
if(val < min) {
this.currentValue = min;
}
this.currentValue = val;
console.log(this.value);
}else {
event.target.value = this.currentValue;
}
在外层添加判断是否为数字的方法isValueNumber:
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+ '');
}
到此一个数字输入框组件基本完成,但是前面提出的后两个要求也需要实现,很简单,在input上绑定一个keydown事件,在data选项中添加数据prop_step
data() {
return{
// 保存初次父组件传递的数据
currentValue : this.value,
prop_step: 10
}
}
// 当聚焦时,按上下键改变
handleChange2(event) {
console.log(event.keyCode)
if(event.keyCode == '38') {
this.currentValue ++;
}
if(event.keyCode == '40') {
this.currentValue --;
}
}
完整代码:
Document
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+ '');
}
Vue.component('input-number',{
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
template: `
-
+
`,
data() {
return{
// 保存初次父组件传递的数据
currentValue : this.value,
prop_step: 10
}
},
watch: {
// 监听属性currentValue与value
currentValue(val) {
// currentValue变化时,通知父组件的value也变化
this.$emit('input', val);
},
value(val) {
// 父组件value改变时,子组件currentValue也改变
this.updataValue(val);
}
},
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
},
// 点击减号 减10
handleDown() {
if(this.currentValue < this.min) return
this.currentValue -= this.prop_step;
},
// 点击加号 加10
handleUp() {
if(this.currentValue < this.min) return
this.currentValue += this.prop_step;
},
// 输入框输入值
handleChange(event) {
var val = event.target.value.trim();
var max = this.max;
var min = this.min;
if(isValueNumber(val)) {
val = Number(val);
if(val > max) {
this.currentValue = max;
}
if(val < min) {
this.currentValue = min;
}
this.currentValue = val;
console.log(this.value);
}else {
event.target.value = this.currentValue;
}
},
// 当聚焦时,按上下键改变
handleChange2(event) {
console.log(event.keyCode)
if(event.keyCode == '38') {
this.currentValue ++;
}
if(event.keyCode == '40') {
this.currentValue --;
}
}
},
// 第一次初始化时,也对value进行过滤
mounted: function() {
this.updataValue(this.value);
}
})
var app = new Vue({
el:'#app',
data:{
value: 5
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
value数字 vue_Vue数字输入框组件使用方法详解相关推荐
- 下拉多选框 微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- c语言 数字分离编程,C++ 整数拆分方法详解
一.问题背景 整数拆分,指把一个整数分解成若干个整数的和 如 3=2+1=1+1+1 共2种拆分 我们认为2+1与1+2为同一种拆分 二.定义 在整数n的拆分中,最大的拆分数为m,我们记它的方案数为 ...
- 微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- c++中调用Com组件的方法详解
转载自:http://www.cppblog.com/woaidongmao/archive/2011/01/10/138250.html 需求: 1.创建myCom.dll,该COM只有一个组 ...
- node.js require 自动执行脚本 并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景 写这个小脚本的初衷是,项目本身添加一个组件太 ...
- 数字内置方法详解(int/long/float/complex)
一.常用方法 1.1.int 以下是Python2.7的int内置函数: 序号 函数名 作用 举例 1 int.bit_length() 二进制存储这个整数至少需要多少bit(位). >> ...
- python判断输入数字大于0,对python 判断数字是否小于0的方法详解
对python 判断数字是否小于0的方法详解 为了精度更准确 可以使用数字的绝对值 < 1.0e-16 或者 < 1.0e-8来对比 abs(Num) 以上这篇对python 判断数字是 ...
- matlab guide图像处理实例,现代数字图像处理技术提高及应用案例详解 MATLAB版-教科书.pdf...
数字,图像处理,技术,提高,应用,案例,详解,教科书 [General Information] 书名=现代数字图像处理技术提高及应用案例详解 MATLAB版 作者=赵小川编著 页数=384 SS号 ...
- vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中 ...
- 数字信号处理实验matlab版答案,数字信号处理习题答案及matlab实验详解.pdf
数字信号处理习题答案及matlab实验详解.pdf 第一章 参考答案: 1 (1)2 2 14 ,有理数,所以周期为 14 0 3 3 7 2 2 (2 ) 12 ,无理数,非周期 ...
最新文章
- Windows Python3.6 安装 IPython(Jupyter) qtconsole
- 松江库卡机器人_上海高质量发展调研行|库卡机器人:为全球提供“松江创造”的产品...
- Spring Boot 最流行的 16 条实践解读!
- 院士论坛|李德仁:测绘遥感与智能驾驶
- UICollectionViewDelegateFlowLayout 使用
- ROS-手势控制小海龟移动
- 交易引擎的对账状态为空的处理方式
- Linux (x86) Exploit 开发系列教程之八 绕过 ASLR -- 第三部分
- iOS中利用UISearchBar实现搜索
- 卷积神经网络第四周作业1 - Face Recognition for the Happy House - v1
- 利用Twemperf测试Memcache的性能
- 我眼中的《APUE》
- rtc校准算法_CRC校验算法的实例解析
- 新主播如何在直播行业混得好
- word 格式的试题 转 问卷星excel格式
- 拿不到offer退全款 | 廖雪峰的“Web 全栈架构师”开班了!
- 多核芯片间的核间通信IPC机制
- Python基础=== Tkinter Grid布局管理器详解
- 面试题01.05.一次编辑
- 艺展中国-一代名家刘泽仲作品展
热门文章
- Java使用HttpURLConnection上传文件
- iOS--UIView和UIWindow用法
- Eclipse使用常见设置
- SharePoint读取和设置列表栏的内容
- jupyter notebook python插件_Python文学化编程-Jupyter notebook使用和插件拓展
- 拓端tecdat|基于贝叶斯模型的随机森林预测方法分析汽车燃油经济性
- 拓端tecdat|R语言中的马尔可夫区制转移(Markov regime switching)模型
- 清华大学操作系统OS学习(五)——物理内存管理:非连续内存分配
- 8、饼图(ax.pie)
- 1、matplotlib绘制一个简单的图形