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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Angular 路由route实例代码
Jul 12 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
jquery实现手风琴案例
May 04 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
PHP开发框架总结收藏
2008/04/24 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Python3常见函数range()用法详解
2019/12/30 Python
Python关于反射的实例代码分享
2020/02/20 Python
使用Python实现批量ping操作方法
2020/05/06 Python
Python能做什么
2020/06/02 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
香港士多网上超级市场:Ztore
2021/01/09 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
健康证明
2015/06/19 职场文书
详解Python常用的魔法方法
2021/06/03 Python
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript