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

在菜鸟教程里,看了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来获取就不合适,所以就要让输入框与一个数据绑定起来。

现在页面有三个输入框,三个输入框的内容要分别绑定到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');
 }
 },
})

运行效果图:

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

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

这个时候,要实现反向的绑定,那就需要在组件里为外面的数据添加监听器。有对象,有属性名,为它加监听器,是可以加的,但是外面的属性要绑定哪个组件里的输入框呢?所以组件上要再添加一个属性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组件学习教程进行学习。

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

(0)

相关推荐

  • vue 简单自动补全的输入框的示例

    实现一个输入框,输入信息后显示由后台返回的数据,供用户选择,之前用的elm的组件,不过那个有点大...简单的情况下自己实现一个也能满足要求...应该吧... 主题包括一个input用于输入,一个div用于展示数据,div里面是数据项item 当在input中按下回车时,会根据信息去后台获取数据,如果用户点击了别的地方,input失去焦点,则提示的div也应该收起来 bug: 在blur事件中,如果直接将isShow设置为false会出问题,先失去焦点,显示面板消失,所以你的点击不会被监听到...

  • Vue实现数字输入框中分割手机号码的示例

    需求 在移动端弹出系统数字键盘,输入手机号码的时候,使用344形式分割. 分析: 首先,如果要在移动端弹出数字键盘,并且还可以有空格,那么就要使用type="phone"的input框 如果要实现输入的时候增加空格,删除的时候减少空格,那么就要使用watch 手机号码为11位,加上两个空格,最多13位,因此要限定长度 代码实现 <body> <div id="app"> <!-- 类型为phone,最大长度为13 --> <

  • 基于Vue开发数字输入框组件

    随着 Vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: (1)index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-

  • vue.js 实现输入框动态添加功能

    代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &

  • vue中使用iview自定义验证关键词输入框问题及解决方法

    一.验证需求 对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法 在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru

  • vue input输入框模糊查询的示例代码

    Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo

  • vue组件中点击按钮后修改输入框的状态实例代码

    最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>

  • vue实现验证码输入框组件

    先来看波完成效果图 需求 输入4位或6位短信验证码,输入完成后收起键盘 实现步骤 第一步 布局排版 <div class="security-code-wrap"> <label for="code"> <ul class="security-code-container"> <li class="field-wrap" v-for="(item, index) in num

  • Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决

    一.背景 在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化 <label class="fl">日期:</label> <div class="input-wrapper fr"> <input class="daterangepicker" ref="datepicker" v-model="dateRang

  • Vue.js数字输入框组件使用方法详解

    本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

随机推荐