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 相关文章推荐
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
js 作用域和变量详解
Feb 16 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
js实现3D旋转效果
Aug 18 Javascript
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
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python 实现矩阵填充0的例子
2019/11/29 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
python logging模块的使用
2020/09/07 Python
单位作风建设剖析材料
2014/10/11 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL
Nginx配置之禁止指定IP访问
2022/05/02 Servers