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

菜鸟教程里，我看了vue.js的教程，看完之后，我试着实现了只能输入数字的输入框。在之前的博客中，这个功能也是用jquery实现的，这里用vue.js实现，并记录了实现过程

如果只是一个输入框，实现起来非常简单。输入框的内容与数据绑定，一个监听器被添加到数据中。代码如下：

！DOCTYPE html htmlhead meta charset=' utf-8 ' title Vue/title script src=' http :3359 cdn . static file . org/Vue/2 . 4 . 2/Vue . min . js '/script/head dy div id=' div 1 ' input v-model=' content '/div script var mydata=new Vue({ El : ' # div 1 '，data: { content: ' ' }，Watch 3333333)内容=val。replace (/\ d/g，' ')} })/script/body/html如果页面或系统中有很多这样的输入框，这样做不是很好。每个数据加一个监听器，然后有一天需求突然变了，可以输入数字和字母，要吐血！而且代码不可移植，需要在另一个系统中重写，所以需要编写一个通用的方法来实现这个需求。这时，我们需要使用组件的功能。首先，创建一个新的js文件，我称之为num.js然后num.js中的代码：

Vue.component('number '，{ template: '输入类型='text' v-model='con '，' data : function(){ return { con : ' ' } }，watch : { con : function(val){ this . con=val . replace(/\ D/g ' ')；}}})这样就定义了一个组件号，其中有一个输入框，输入框的内容绑定了data con，listener control con只能是一个数字。然后在html页面中引入num.js，并在页面中添加number/number标签。在浏览器中，你看到的是一个输入框，但是输入框中只能输入数字。输入框放置在页面上，供用户输入内容，输入的内容是针对程序的。如何获取输入框的内容？如果使用jquery，是通过dom获取的，但是vue的设计思路是dom和数据是分开的，不适合通过dom获取，所以需要用一个数据绑定输入框。

现在页面有三个输入框，三个输入框的内容应该分别绑定到val1、val2和val3。怎么做？首先，我的方法是在数字标签上定义一个方法。当组件中con的侦听器听到con的值发生了变化时，它会调用此方法来传递con的值，而此方法会调用mydata中的一个方法来传递它两次，以将值传递给相应的val。这个逻辑，听起来是不是很费解？你不害怕在身边。重要的是别人用起来不方便，所以需要定义一个方法在mydata中赋值。所以我以后再改。输入框的内容不是绑定了一条数据吗？你要告诉我绑定到哪个数据，所以在数字标签上，你需要告诉我是哪个对象，哪个属性名，这样我就可以把输入框的内容绑定到这个对象的这个属性上。在这种情况下，对象是mydata，属性名是val1、val2和val3。传入对象，并传递字符串mydata，而不是对象。如何在组件中使用mydata？此时，有必要在js中使用一个非常强大的函数eval。eval函数接收一个字符串参数，该参数只能是一个字符串，然后该函数将解析并执行该字符串作为js代码。密码

！DOCTYPE html html head meta charset=' utf-8 ' title vue/title script src=' http :https://cdn . static file . org/vue/2 . 4 . 2/vue . min . js '/script script src=' http : num . js '/script/head body div id=' div 1 ' Number objname=' mydata ' keys=' val1 '/Number objname=' mydata ' keys=' val2 '/

Vue.component('number '，{ props: ['objname '，' keys']，template: '输入类型='text' v-model='con '，' data : function(){ return { con : ' ' } }，watch : { con : function(val){ this . con=val . replace(/\ D/g ' ')；eval(this . obj name '[this . keys]=this . con ')；}}，})运行渲染：

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

这时在页面上操作，会发现上面输入框的内容会影响到下面，但是下面输入框的内容不会影响上面输入框的内容

此时，要实现反向绑定，需要在组件中的外部数据中添加一个监听器。有对象和属性名，可以给它们添加监听器，但是外部属性应该绑定到哪个组件输入框呢？因此，应该向组件添加一个属性引用。此ref是vue定义的属性，用于查找子组件。这样，代码最终变成

div id=' div 1 ' Number ref=' val 1 ' obj name=' my data ' keys=' val 1 '/Number Number ref=' val 2 ' obj name=' my data ' keys=' val 2 '/Number Number ref=' val 3 ' obj name=' my data ' keys=' val 3 '/Number P第一个输入框的内容为：{{val 1}}/p第二个输入框的内容为：{{val 2}}/p第三个输入框的内容为：{{val3}

Vue.component('number '，{ props: ['objname '，' keys']，template: '输入类型='text' v-model='con '，' data : function(){ return { con : ' ' } }，mount ed : 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 . obj name '[this . keys]=this . con ')；}}，})这样，数据就双向绑定了。在挂载中，addEventListener方法存在兼容性问题，但是IE8及以下版本没有这个方法，所以这里不做兼容性处理。然后是优化。当您查看代码时，您可以看到ref和key在数字标签上实际上是相同的。只能用一个吗？实验之后，我无法得到组件内部ref的值。不知道怎么弄，所以学得还不够深。然后就是objname是否不能通过。如果没有传递，默认情况下，它将是组件的父对象。这是可以实现的。最后，组件可以扩展，比如添加另一个属性mytype。如果mytype没有通过，默认输入框只能输入数字。如果是word，输入框只能输入字母和数字。如果是中文，只能输入汉字。

点击《Vue.js前端组件学习教程》获取更多教程。欢迎学习和阅读。

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。