快活林资源网

vue.js实现只能输入数字的输入框
网络编程 2024/12/26 佚名
3 1
快活林资源网 Design By www.csstdc.com

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

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Vue</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


如果页面或是系统里有很多这样的输入框，这样做，就不是很好了。每个数据都加一个监听器，然后某一天突然需求改了，可以输入数字和字母了，那就要改得吐血了！而且这样做，代码也没有可移植性，到了另一个系统里，还得重写一遍，所以，就要写一个通用的方法来实现这个需求。这个时候就要用到组件的功能，先新建一个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="/UploadFiles/2021-04-02/vue.min.js">


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组件学习教程进行学习。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com