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


Posted in Javascript onOctober 19, 2019

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

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Vue</title>
 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
 <div id="div1">
 <input v-model="content">
 </div>
 <script>
 var mydata = new Vue({
 el: '#div1',
 data: {
 content: ''
 },
 watch: {
 content: function(val){
  this.content = val.replace(/\D/g, '')
 }
 }
 })
 </script>
</body>
</html>

如果页面或是系统里有很多这样的输入框,这样做,就不是很好了。每个数据都加一个监听器,然后某一天突然需求改了,可以输入数字和字母了,那就要改得吐血了!而且这样做,代码也没有可移植性,到了另一个系统里,还得重写一遍,所以,就要写一个通用的方法来实现这个需求。这个时候就要用到组件的功能,先新建一个js文件,我这里就叫num.js。然后num.js里面的代码:

Vue.component('number', {
 template: '<input type="text" v-model="con">',
 data: function(){
 return {
 con: ''
 }
 },
 watch: {
 con: function(val){
 this.con = val.replace(/\D/g, '');
 }
 }
})

这样就定义了一个组件number,组件里是一个输入框,输入框的内容与数据con绑定,监听器控制con只能是数字。然后在html页面里引入num.js,在页面添加<number></number>标签,在浏览器里,看到的就是一个输入框,但是输入框只能输入数字。在页面放置输入框,是为了让用户输入内容,输入的内容是要给程序用的。那要怎么获取输入框的内容?如果是用jquery的话,那就是通过dom来获取,但vue的设计理念是dom和数据分离,通过dom来获取就不合适,所以就要让输入框与一个数据绑定起来。

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

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

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>vue</title>
 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 <script src="num.js"></script>
 </head>
 <body>
 <div id="div1">
 <number objname="mydata" keys="val1"></number>
 <number objname="mydata" keys="val2"></number>
 <number objname="mydata" keys="val3"></number>
 <p>第一个输入框的内容是: {{val1}}</p>
 <p>第二个输入框的内容是: {{val2}}</p>
 <p>第三个输入框的内容是: {{val3}}</p>
 </div>
 
 <script>
 var mydata = new Vue({
 el: '#div1',
 data: {
  val1: '',
  val2: '',
  val3: ''
 }
 })
 </script>
 </body>
</html>

num.js的代码:

Vue.component('number', {
 props: ['objname', 'keys'],
 template: '<input type="text" v-model="con">',
 data: function(){
 return {
 con: ''
 }
 },
 watch: {
 con: function(val){
 this.con = val.replace(/\D/g, '');
 eval(this.objname+'[this.keys]=this.con');
 }
 },
})

运行效果图:

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

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

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

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

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

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

<div id="div1">
 <number ref="val1" objname="mydata" keys="val1"></number>
 <number ref="val2" objname="mydata" keys="val2"></number>
 <number ref="val3" objname="mydata" keys="val3"></number>
 <p>第一个输入框的内容是: {{val1}}</p>
 <p>第二个输入框的内容是: {{val2}}</p>
 <p>第三个输入框的内容是: {{val3}}</p>
 <input v-model="val1">
 <input v-model="val2">
 <input v-model="val3">
 </div>

num.js里面

Vue.component('number', {
 props: ['objname', 'keys'],
 template: '<input type="text" v-model="con">',
 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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
javascript中this的四种用法
May 11 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
Vue数字输入框组件的使用方法
Oct 19 #Javascript
微信小程序实现禁止分享代码实例
Oct 19 #Javascript
Vue.js组件props数据验证实现详解
Oct 19 #Javascript
Vue.js组件使用props传递数据的方法
Oct 19 #Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 #Javascript
JavaScript闭包相关知识解析
Oct 19 #Javascript
Vue.js组件通信之自定义事件详解
Oct 19 #Javascript
You might like
sphinx增量索引的一个问题
2011/06/14 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
如何打开php的gd2库
2017/02/09 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Python实现队列的方法
2015/05/26 Python
python开发中module模块用法实例分析
2015/11/12 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
详解python tkinter 图片插入问题
2020/09/03 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
美国健康和保健平台:healtop
2020/07/02 全球购物
信息管理应届生求职信
2014/03/07 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
党员承诺书格式范文
2015/04/28 职场文书
黄埔军校观后感
2015/06/10 职场文书
董事长新年致辞
2015/07/29 职场文书
幼儿园教师辞职信
2019/06/21 职场文书