vue指令只能输入正数并且只能输入一个小数点的方法

最近在做一个金额查询，验证的时候总是出现很多问题，如输入-号后，input框里是没有了，但是在model里还是绑定了，提交的时候就会报错，真的是让人很是郁闷，小数点也是input框过滤掉了，但是提交的时候也会出现。不过经过努力终于找到了一种解决方案，在这里``和大家分享一下下。

Vue.directive('numbers', {
 bind: function (el, binding) {
  console.log('ere')
 },
 inserted: function (el) {
  // el.querySelector('input').blur(console.log('etset'))
 },
 update: function (el, binding, vnode, oldVnode) {
  console.log('vnode', vnode)
  let express = vnode.data.directives[1].expression
  // let value = el.querySelector('input').value
  let value = vnode.data.directives[1].value
  if (typeof value === 'string') {} //在重置的时候清空
  if (value.split('.').length - 1 > 1) {
   value = value.replace(/\.{2,}/g, '') // 只保留第一个. 清除多余的
   value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  }
  let repeatValue = value.replace(/[^\d.]/g, '')
  // setTimeout(() => {
  //  el.querySelector('input').value = repeatValue
  // }, 5)
  setValueWithExpressionVue(vnode.context.$data, express, repeatValue)
 },
 componentUpdated: function () {},
 unbind: function (el) {}
})

//
function setValueWithExpressionVue (currObj, expression, value) {
 expression = expression.split('.')
 expression.forEach(function (arg, i) {
  if (i < expression.length - 1) {
   currObj = currObj[arg]
  } else {
   currObj[arg] = value
  }
 })
}

放到main.js里就好了

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

赞 (0)

相关推荐

  • 详解Vue取消eslint语法限制

    由于vue对语法的限制过于严格,以至于在我第一次编译运行的时候一直编译失败,当然也包括一些警告: ➜ my-project npm run dev > bblee-app@1.0.0 dev /Users/bianlifeng/my-project > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting WARNING Compiled with 1 warnings 5:

  • Vue表情输入组件 微信face表情组件

    Vue表情输入组件 微信face表情组件

    VUE表情包输入组件,先来张成品图看看. 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧. 注意: 1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址 2.样式是用scss需要安装依赖: npm install node-sass sass-loader -D 思路: 页面内容总体分为三块区域(内容区,表情区,输入区),引入JSON文件表情库渲染到页面,给每个表情绑定点击事件并传递下标,将用户点击过的表情存放到一个数组中,赋值给input标签的v

  • vue中Element-ui 输入银行账号每四位加一个空格的实现代码

    一.问题描述: 我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格.那么,在vue,element-ui 组件中,如何实现呢? 二.效果图: 三.实现代码: <el-table-column prop="account" label="银行账号"> <template slot-scope="scope"> <el-input type="text" maxlength=&q

  • 解决vue中监听input只能输入数字及英文或者其他情况的问题

    如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search

  • vue如何限制只能输入正负数及小数

    <el-input keyup.native="isFloor"/> //正数,含小数 isFloor(e,type){ if(type=='floor') { var val=e.target.value; //限制只能输入一个小数点 if (val.indexOf(".") != -1) { var str = val.substr(val.indexOf(".") + 1); if (str.indexOf(".&qu

  • vue 实现边输入边搜索功能的实例讲解

    效果图: 搜索分类2种情况,一般的是当用户输入完,点击确定的按钮在向后发送请求,还有一种就是的我一边输入,一边向后台发送请求,但是会产生一个性能的问题,就是一直发请求造成页面的卡顿,这里就是使用截流函数,当用户每次点击键盘之间超过300ms就发送请求,否则不请求 search.vue <template> <div id="search"> <input type="text" class="search" plac

  • 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指令只能输入正数并且只能输入一个小数点的方法

    最近在做一个金额查询,验证的时候总是出现很多问题,如输入-号后,input框里是没有了,但是在model里还是绑定了,提交的时候就会报错,真的是让人很是郁闷,小数点也是input框过滤掉了,但是提交的时候也会出现.不过经过努力终于找到了一种解决方案,在这里``和大家分享一下下. Vue.directive('numbers', { bind: function (el, binding) { console.log('ere') }, inserted: function (el) { // e

  • vue 限制input只能输入正数的操作

    在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. <input class="keep_input" v-number-only style="width:35px" v-model="scope.row.fileOrder" @input="scope.row.fileOrder = Number($event.target.value.

  • 文本框只能输入数字的js代码(含小数点)

    只能输入0-9多包括小数点 <html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <title>js 只能输入数字和小数点</title> <script language="JavaScript" type="text/javascript">

  • javascript验证只能输入数字和一个小数点示例

    复制代码 代码如下: function gaga(obj){ // 值允许输入一个小数点和数字 obj.value = obj.value.replace(/[^\d.]/g,""); //先把非数字的都替换掉,除了数字和. obj.value = obj.value.replace(/^\./g,""); //必须保证第一个为数字而不是. obj.value = obj.value.replace(/\.{2,}/g,"."); //保证只有出

  • vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

    本文实例讲述了vue使用自定义事件的表单输入组件用法.分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. v-model的实现原理 : <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value&

  • Vue.js自定义事件的表单输入组件方法

    Vue.js使用自定义事件的表单输入组件 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定.要牢记: <input v-model="something"> 这不过是以下示例的语法糖: <input v-bind:value="something" v-on:input="something = $event.target.value"> 所以在组件中使用时,它相当于下面的简写: <

  • vue子组件封装弹框只能执行一次的mounted问题及解决

    目录 vue子组件封装弹框只能执行一次的mounted vue mounted方法在什么情况下使用和js定时器使用 我们在什么时候使用mounted方法? 总结 vue子组件封装弹框只能执行一次的mounted 封装了一个子组件来处理弹框内容,发现只能执行一次,在父组件添加一个 v-if 即可,当每次弹框关闭的时候销毁掉该组件就没有问题了. 贴一下简易代码: 父组件: <add-dialog v-if="addVisible" :dialogVisible="addVi

  • 分享几个可以助你提高效率的Vue指令

    分享几个可以助你提高效率的Vue指令

    目录 前言 v-model v-model修饰符 v-cloak 附:v-bind和v-model的区别 总结 前言 很多使用Vue的同学往往最容易忽略的指令,由于在这里考虑到很多初学甚至还没有开始接触Vue的同学呢,在介绍v-clos之前呢就先以大家都熟知的v-model编写小dem v-model 相信大家对v-model并不陌生,简单来讲他就是用于在表单控件以及组建上创建的双向数据绑定 首先我们搭建一个Vue的小环境,在一个html页面中引入Vue.js 下面为大家带来一个小栗子: <bo

  • 基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

    基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

    最近做微信端的页面遇到了一个之前没有遇到过的一个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚开始我请教了公司的移动研发,从他那里得到启发,最终实现了这个效果,先把效果图展示出来给大家看看 效果图: 输入验证码 粘贴图片输入完毕 下面就把实现过程奉献给大家 第一步:编写HTML代码 <div class="main-out"> <p class="identifying-title">输入企业提供的

  • vue指令v-html使用过滤器filters功能实例

    问题 2.0 filters only work in mustache tags and v-bind. Vue2.0 不再支持在 v-html 中使用过滤器,比如在 1.0 中是这样使用的: {{{ option.title | highlight }}} 然而,现在不能使用了,Vue2.0 的过滤器现在只能应用在 {{ }} 和 v-bind 中. 然而,嫌麻烦,还想使用怎么办? 解决方法 使用全局方法 使用 computed 属性 使用 $options.filters 使用全局方法 p

随机推荐