当前位置: 开发笔记 > 前端 > 正文

vue.js实现只能输入数字的输入框

作者：朵朵妞er | 来源：互联网 | 2021-09-23 02:35

这篇文章主要为大家详细介绍了vue.js实现只能输入数字的输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在菜鸟教程里，看了vue.js的教程，看完后，练练手，就试着实现了只能输入数字的输入框。在之前的博客里，用jquery也实现了这样的功能，这里用vue.js来实现，把实现的过程记录下来

如果只是一个输入框，要实现就非常的简单了，输入框的内容和数据绑定，给数据加一个监听器就可以了，代码如下：

现在页面有三个输入框，三个输入框的内容要分别绑定到val1、val2、val3。该怎么弄？一开始，我的做法是在number标签上定义一个方法，组件里con的监听器监听到con值有改变时，就调用这个方法，把con的值传出来，而这个方法又会调用mydata里的一个方法，两次传递，把值传给对应的val。这逻辑，听着是不是感觉很绕。很绕都不怕，重要的是，别人用起来很不方便，需要自己到mydata里定义一个方法来赋值。所以后来就再改，输入框的内容不是要绑定一个数据吗？那要绑定到哪个数据，得告诉我吧，所以在number标签上，需要告诉我对象是哪个，属性名是哪个，这样，我就可以把输入框的内容绑定到这个对象的这个属性上。在这里，对象就是mydata，属性名就是val1、val2、val3。把对象传进去，传的是字符串mydata，并不是一个对象，在组件里面，要怎么使用mydata这个对象？这个时候，就需要用到js里非常强大的一个函数eval，eval函数接收一个字符串参数，只能是字符串，然后函数会把这个字符串当作js代码来解析并执行。代码



 
 
 
 
这样，输入框限制了只能输入数字，也和数据绑字了，但这只是单向的绑字，输入框的内容改变了，外面的数据会跟着改变，但外面的数据改变了，输入框的内容不会跟着改变，所以，现在只是单向的绑定。在页面下面再添加三个普通的输入框，三个输入框分别绑定val1、val2、val3

这个时候到页面上操作就会发现，上面的输入框内容改变会影响下面的，但下面的输入框内容改变了，就不会影响上面的输入框的内容

这个时候，要实现反向的绑定，那就需要在组件里为外面的数据添加监听器。有对象，有属性名，为它加监听器，是可以加的，但是外面的属性要绑定哪个组件里的输入框呢？所以组件上要再添加一个属性ref，这个ref是vue定义的一个属性，用来找子组件的。这样，代码最终就变成


 
 
 
 第一个输入框的内容是： {{val1}}
 第二个输入框的内容是： {{val2}}
 第三个输入框的内容是： {{val3}}
 
 
 
 

num.js里面

Vue.component('number', {
 props: ['objname', 'keys'],
 template: '',
 data: function(){
 return {
 con: ''
 }
 },
 mounted: function(){
 var self = this;
 window.addEventListener('load', function(){
 eval(self.objname+'.$watch(\''+self.keys+'\',function(val){this.$refs.'+self.keys+'.con=val})');
 })
 },
 watch: {
 con: function(val){
 this.con = val.replace(/\D/g, '');
 eval(this.objname+'[this.keys]=this.con');
 }
 },
})

这样，数据就实现了双向绑定。在mounted里面，addEventListener方法是有兼容问题的，IE8及以下版本没有这个方法，我这里没有做兼容处理。然后就是优化，看代码就发现，在number标签上，ref和keys实际上是一样的，可不可以只用一个？经过实验，在组件内部获取ref的值获取不到，这个我还不知道怎么获取，学得不够深呐。然后就是objname可不可以不传，不传的话就默认是组件的父对象，这个是可以实现的。最后，组件还可以进行一些扩展，比如再添加一个属性mytype，mytype不传则默认输入框只能输入数字，如果为word，则输入框只能输入字母和数字，如果为chinses，则只能输入中文汉字等。
更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

推荐阅读

jquery
jquery id选择器 id带.问题

例如控件ID为user.id使用$(#user.id)不能得到正确的结果必须使用\\转义即$(#user\\.id)转载于:https:www.cnblogs.comrch ... [详细]

蜡笔小新 2023-12-12 12:22:11
css
Android实战——jsoup实现网络爬虫，糗事百科项目的起步

本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]

蜡笔小新 2023-12-11 09:19:45
css
jQuery图片预加载+等比例缩放

本文介绍了使用jQuery实现图片预加载和等比例缩放的方法，同时提供了演示和相关代码。该方法可以重置图片的宽度和高度，并使图片在水平和垂直方向上居中显示。 ... [详细]

蜡笔小新 2023-12-09 17:59:12
css
阿里Treebased Deep Match(TDM) 学习笔记及技术发展回顾

本文介绍了阿里Treebased Deep Match(TDM)的学习笔记，同时回顾了工业界技术发展的几代演进。从基于统计的启发式规则方法到基于内积模型的向量检索方法，再到引入复杂深度学习模型的下一代匹配技术。文章详细解释了基于统计的启发式规则方法和基于内积模型的向量检索方法的原理和应用，并介绍了TDM的背景和优势。最后，文章提到了向量距离和基于向量聚类的索引结构对于加速匹配效率的作用。本文对于理解TDM的学习过程和了解匹配技术的发展具有重要意义。 ... [详细]

蜡笔小新 2023-12-14 19:24:58
css
Lodop中特殊符号打印设计和预览样式不同的问题解析

本文主要解析了在Lodop中使用特殊符号打印设计和预览样式不同的问题。由于调用的本机ie引擎版本可能不同，导致在不同浏览器下样式解析不同。同时，未指定文字字体和样式设置也会导致打印设计和预览的差异。文章提出了通过指定具体字体和样式来解决问题的方法，并强调了以打印预览和虚拟打印机测试为准。 ... [详细]

蜡笔小新 2023-12-14 18:29:32
css
Final关键字的含义及用法详解

本文详细介绍了Java中final关键字的含义和用法。final关键字可以修饰非抽象类、非抽象类成员方法和变量。final类不能被继承，final类中的方法默认是final的。final方法不能被子类的方法覆盖，但可以被继承。final成员变量表示常量，只能被赋值一次，赋值后值不再改变。文章还讨论了final类和final方法的应用场景，以及使用final方法的两个原因：锁定方法防止修改和提高执行效率。 ... [详细]

蜡笔小新 2023-12-14 18:07:46
ajax
使用jQuery / AJAX实现两个div的动态更新

本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串，可以将不同的文本分别插入到两个div中，从而实现页面的动态更新。 ... [详细]

蜡笔小新 2023-12-11 10:07:32
ajax
从零基础到精通的前台学习路线

随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]

蜡笔小新 2023-12-10 20:05:15
npm
Node.js学习笔记(一)package.json及cnpm

本文介绍了Node.js中包的概念，以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM（Node Package Manager）的基本介绍和使用方法，以及如何通过NPM下载第三方模块。 ... [详细]

蜡笔小新 2023-12-10 18:26:02
vue.js
用Vue实现的Demo商品管理效果图及实现代码

本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]

蜡笔小新 2023-12-10 15:14:25
jquery
如何在输入字段中使用默认值的方法及代码

本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时，使用50作为默认值；当输入字段填充有-20或更多（负数）时，使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码，用于动态地根据条件使用默认值。 ... [详细]

蜡笔小新 2023-12-10 12:35:46
ajax
Java后台Jsonp处理方法及其应用场景

本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议，它允许在服务器端通过Script tags返回至客户端，并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法，它是一种面向数据结构的分析和设计方法，以活动为中心，将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码，使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]

蜡笔小新 2023-12-10 10:55:21
dom
jQuery如何判断一个元素是否被点击？

本文介绍了使用jQuery判断一个元素是否被点击的方法，并通过示例进行了具体说明。注意要指定父级，否则会执行多次。 ... [详细]

蜡笔小新 2023-12-10 10:23:28
css
如何在Jquery中通过其样式值获取元素

本文介绍了如何在Jquery中通过元素的样式值获取元素，并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]

蜡笔小新 2023-12-10 04:03:11
jq
获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法

本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法，包括使用jQuery的选择器和遍历方法。通过这些方法，可以方便地获取到所需的元素，并进行相应的操作。 ... [详细]

蜡笔小新 2023-12-09 10:26:04

朵朵妞er

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章