vue中复杂数据用input框双向数据绑定后需要判断输入的数据是不是正整数的函数封装

最新推荐文章于 2023-07-05 09:45:15 发布
最新推荐文章于 2023-07-05 09:45:15 发布
阅读量404 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58495461/article/details/122586565
版权

数据

const setQa = [{
            "color": "#d62036",
            "name": "疑似点状出血",
            "zone": {
                "L": {
                    "macular": {
                        "num": 1,
                        "area": "0.008",
                        "zoneName": "黄斑区"
                    },
                    "disc": {
                        "num": -1,
                        "area": "0.009",
                        "zoneName": "视盘区"
                    },
                    "other": {
                        "num": 0,
                        "area": "0",
                        "zoneName": "后极部视网膜区"
                    }
                },
                "R": {
                    "macular": {
                        "zoneName": "黄斑区",
                        "num": 0,
                        "area": 0
                    },
                    "disc": {
                        "zoneName": "视盘区",
                        "num": 0,
                        "area": 0
                    },
                    "other": {
                        "zoneName": "后极部视网膜区",
                        "num": 0,
                        "area": 0
                    }
                }
            }
        }, {
            "color": "#9013fe",
            "name": "疑似片状出血",
            "zone": {
                "L": {
                    "macular": {
                        "zoneName": "黄斑区",
                        "num": 0,
                        "area": 0
                    },
                    "disc": {
                        "zoneName": "视盘区",
                        "num": 0,
                        "area": 0
                    },
                    "other": {
                        "zoneName": "后极部视网膜区",
                        "num": 0,
                        "area": 0
                    }
                },
                "R": {
                    "macular": {
                        "zoneName": "黄斑区",
                        "num": 0,
                        "area": 0
                    },
                    "disc": {
                        "zoneName": "视盘区",
                        "num": 0,
                        "area": 0
                    },
                    "other": {
                        "zoneName": "后极部视网膜区",
                        "num": 0,
                        "area": 0
                    }
                }
            }
        }, {
            "color": "#f8e829",
            "name": "疑似硬渗或玻璃膜疣",
            "zone": {
                "L": {
                    "macular": {
                        "zoneName": "黄斑区",
                        "num": 0,
                        "area": 0
                    },
                    "disc": {
                        "zoneName": "视盘区",
                        "num": 0,
                        "area": 0
                    },
                    "other": {
                        "zoneName": "后极部视网膜区",
                        "num": 0,
                        "area": 0
                    }
                },
                "R": {
                    "macular": {
                        "zoneName": "黄斑区",
                        "num": 0,
                        "area": 0
                    },
                    "disc": {
                        "zoneName": "视盘区",
                        "num": 0,
                        "area": 0
                    },
                    "other": {
                        "zoneName": "后极部视网膜区",
                        "num": 0,
                        "area": 0
                    }
                }
            }
        }, {
            "color": "#f5a623",
            "name": "疑似软渗或玻璃膜疣",
            "zone": {
                "L": {
                    "macular": {
                        "zoneName": "黄斑区",
                        "num": 0,
                        "area": 0
                    },
                    "disc": {
                        "zoneName": "视盘区",
                        "num": 0,
                        "area": 0
                    },
                    "other": {
                        "zoneName": "后极部视网膜区",
                        "num": 0,
                        "area": 0
                    }
                },
                "R": {
                    "macular": {
                        "zoneName": "黄斑区",
                        "num": 0,
                        "area": 0
                    },
                    "disc": {
                        "zoneName": "视盘区",
                        "num": 0,
                        "area": 0
                    },
                    "other": {
                        "zoneName": "后极部视网膜区",
                        "num": 0,
                        "area": 0
                    }
                }
            }
        }, {
            "color": "#00f",
            "name": "疑似其他异常",
            "zone": {
                "L": {
                    "macular": {
                        "zoneName": "黄斑区",
                        "num": 0,
                        "area": 0
                    },
                    "disc": {
                        "zoneName": "视盘区",
                        "num": 0,
                        "area": 0
                    },
                    "other": {
                        "zoneName": "后极部视网膜区",
                        "num": 0,
                        "area": 0
                    }
                },
                "R": {
                    "macular": {
                        "num": 0,
                        "area": "0",
                        "zoneName": "黄斑区"
                    },
                    "disc": {
                        "num": 0,
                        "area": "0",
                        "zoneName": "视盘区"
                    },
                    "other": {
                        "num": 2,
                        "area": "0.016",
                        "zoneName": "后极部视网膜区"
                    }
                }
            }
        }]

封装的函数方法

 // 限制值只能是正整数
    check_num: function () {
      this.flg = true;
      this.setQa.forEach((item) => {
        let obj1 = item.zone;
        for (const key in obj1) {
          if (Object.hasOwnProperty.call(obj1, key)) {
            for (const mkey in obj1[key]) {
              if (Object.hasOwnProperty.call(obj1[key], mkey)) {
                if (obj1[key][mkey].num < 0) {
                  this.flg = false;
                }
              }
            }
          }
        }
      });
    },

必须满足所有的数据都是正整数，否则就返回false

小周同学:
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3知识点3购物车案例 js/vue中input框只输入正整数的最简写做法
yangyangdt的博客
12-19 1503
js和vue中针对input number框限制只输入正整数的做法，简写。不用写正则和js函数
vue快速限制input框可输入的数字类型（整数，正整数，小数限制小数点后几位）
rookie_lee1210的博客
04-21 6023
vue快速限制input框可输入的数字类型（自然数，正整数，小数限制小数点后几位） 项目中有许多地方需要限制输入框中的数字，比如只允许输入正整数啦，只允许输入自然数（正整数包括0），小限制小数点位数的需求，这些我们大可以封装一个公共的mixins混合方法放在公共部分，然后给input输入框绑定一个@input事件来调用mixins方法就可以啦。 先上代码，开锤开锤，直接莽 方法封装 先在src...
前端vue,使用多个input可以判断input指定的值 输入为正数，是@input,
FUFCY的博客
05-17 583
<template> <view class="mian"> <!-- 只允许输入正整数 --> <input type="number" min="1" max="100"/> <view class="new"><input type="number" v-model="a" placeholder="11" data-index="a" @input="inputs"></view> <v.
Vue限制输入框只能输入整数
weixin_30502157的博客
02-11 3644
首先，得明确监听input输入框变化的方法是input，不是change。 方案一：type= "number" 作用： 成功禁止输入字母 能输入小数点，第一位可以为0，小数点能输入多个 eg:01111.5.5 方案二：v-model.number 作用： 输入过程中能输入字母，但在失去焦点时多余的字母会被清除，且错误的字母不会计入值 输入过程中能输入小数，例如：1...
Vue 的表单输入绑定和数组更新检测（六）
d2235405415的博客
03-18 1653
表单控件在实际开发中使用非常频繁，我们做的各种应用或多或少会需要获取用户提交的信息。针对这种场景，Vue 提供了`v-model`指令帮助我们进行快速的处理表单元素的数据更新。除此之外，我们还会以一个 Todo List 的功能进行 Vue 对数组更新检测的补充说明。
VUE 入门 1 列表、if判断 、双向绑定
weixin_30451709的博客
04-12 289
声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： 【1】 <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ messag...
使用IDEA入门Vue.js - 数据绑定，判断，循环，事件，双向绑定
weixin_42600588的博客
08-14 503
准备工作：IDEA安装vue.js插件 IDEA中File ->setting -> plugins 搜索vue下载安装 第一个vue程序 在script标签中， 定义一个Vue对象，对象中有el：id属性，data：数据属性 使用vue的v-bind属性，将数据进行绑定。 以下代码是将message数据和span标签的title属性进行绑定，当message改变时，span标签的title属性也将改变 <!DOCTYPE html> <html lang="en" xmln
vue 限制input只能输入正数的操作
11-19
在某些项目中 input 框只能输入数字，可以用以下办法： 先在标签上绑定上 @input 事件来监听标签的值变化，通过正则来改变输入的值。 <input class="keep_input" v-number-only style="width:35px" v-model...
vue限制输入框只能输入8位整数和2位小数的代码
10-16
v-model是Vue中实现双向数据绑定的指令，它能将输入框的值与Vue实例中的数据属性绑定起来。在本场景中，v-model用于收集输入框中的数据，并实时反映到Vue实例的相应属性上。 2. watch监听器的使用： 在Vue中，watch...
【vue】基础语法：数据绑定&双向绑定&条件判断&循环&事件绑定&组件
hanne_lovegood的博客
03-15 1255
数据绑定：{{ }}、v-bind（v-bind可缩写为 : ） 双向绑定：v-model 条件判断：v-if、v-else-if、v-else，布尔值 循环：v-for="item in items"，数组 事件绑定：v-on:click，方法（v-on可缩写为 @）
vue自定义指令——input输入类型限制（数字、浮点、整数、英文等），解决中文输入法双向绑定失效问题
coldriversnow的专栏
07-05 4622
实现一个vue自定义指令——输入框（input,el-input）输入内容类型限制，解决中文输入法双向绑定失效问题，多种类型支持，数字类型，浮点类型、英文类型、整数类型、四则运算等一、基本步骤以element,el-input组件为例：1.在自定义指钩子函数bind或inserted通过querySelector找到输入框（input标签）dom对象2.监听input的onkeyup事件，获取输入值，校验并替换输入值，限制输入类型，重新给输入框设值。
Vue源码 模拟Vue 3 实现数据的双向绑定
lin_fightin的博客
12-06 1077
主要是输入框， 这时候我们需要创建于给setVal方法实时修改数据。 这里如果我们绑定的是一个对象， 那我们需要遍历到最底层去修改这个数据，所以取数组长度并且做一个判断，就是遍历到底的时候我给他赋值。 这样就实现数据双向绑定了， 数据双向绑定总结 主要是v-model,当数据影响视图可以直接利用watcher的回调函数来更新视图，当视图影响数据时，定义一个setVal方法，将最新的值与keys传进去，在里面通过修改vm.$data来修改数据，从而达到视图影响数据效果。 实现代理，就是每次不用写this.$
input框限制输入（正数，0），（正数，负数，0），（正整数）验证方法
weixin_48419726的博客
05-18 2141
input框限制输入（正数，0），（正数，负数，0），（正整数）
表单输入绑定
langmanboy的博客
05-24 1336
表单输入绑定 1. 双向绑定 数据的绑定，无论是使用插值表达式 {{}} 还是 v-text 指令，对于数据间的交互都是单向的，只能将 Vue 实例里定义的值传递给页面，页面数据的任何操作无法传递给 model 1-1 v-model使用 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素 v-model 是语法糖，默认情况下相当于 :value 和 @inp
vue双向绑定原理
baidu_38603918的博客
09-03 82
数据劫持部分：在vue2中，采取的是用object.defineProperty()方法来对数据进行劫持，在该方法中，需要去遍历data中的每一个数据，并且在监听数据的时候需要new一个Dep对象来存放需要当前数据的订阅者，当data被访问时，将对应的watcher订阅者加入到Dep 中， 当data发生改变时，调用存放在Dep中所有watcher的notify方法来更新视图。 编译部分：首先对传进来的el元素进行逐个进行判断，判断其是属于元素节点还是文本节点，不通的节点采用不同的方法进行编译，还要判断
vue之表单输入绑定
Little___Turtle的博客
07-01 3794
vue表单输入绑定简单使用说明 易懂版
vue 验证输入框只能输入整数以及只能输入整数和小数
热门推荐
郝峰vip的博客
11-12 1万+
前言 不管什么时候做项目都会遇到验证输入框只能输入整数和小数的需求 STEP 一，输入的必须为正整数，不能输入小数点，这个参考的是element-ui的校验 v-model加.number修饰符，在检验规则里设置type为number <el-form :model="form" :rules="rules" ref="form"> <el-form-item prop="positive_integer"> <el-inp
vue input 正整数
xiaoxiaoxiaopb的博客
07-19 1433
项目场景： 在使用VUE框架的时候我们可能会要求input输入框只接收数字，并且为正数，实现方式多种多样，这里主要记录两种解决方案 自定义指令 我们可以通过自定义指令来解决数据处理问题，但使用指令去解决这一问题会有一些小问题，因为自定义注解无法保证node渲染与数据处理的先后问题，因此在使用自定义注解来解决此问题时可能会带来一些前端数据展示问题，一下代码为自定义注解 directives: { numberOnly: { bind: (el) => { el.
vue rules以及原生js判断字符串是否为正整数(正小数)
zhaoyy0513的博客
09-05 1万+
1.在vue中 使用rules形式进行校验 1.首先在vue文件的methods()中添加校验方法，这里校验方法命名为isNumber用自带的.test方法进行正则校验 methods: { isNumber(rule, value, callback) { if (value === '') { return callback(); } ...
vue3 elelemntui 限制input框只能输入正整数
最新发布
11-08
可以通过在标签上绑定 @input 事件来监听标签的值变化，然后通过...然后在需要限制输入正整数的 input 标签上使用 v-number-only 指令即可： ```html <el-input v-model="inputValue" v-number-only></el-input> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值