输入一个数字，另一个输入框同步更新实现

最新推荐文章于 2023-02-02 15:59:41 发布
最新推荐文章于 2023-02-02 15:59:41 发布
阅读量797 收藏 1
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45146135/article/details/120077521
版权

需求是希望输入人口数，那么另一个规划数量能够随之变化计算出来

我们都知道，应当将人口数加以运算赋值给规划数量，但发现运行输入数据后不能同步显示规划数量，只有点击其他事件才能显示，与需求不符

菜鸟寻求大佬后，发现要在computed计算属性中书写运算，computed用来监控自己定义的变量，直接在computed里面定义变量，就能够在页面上进行数据的双向绑定，从而在页面上实时的显示另一个输入框的计算结果。

话不多说，上代码

qq_45146135
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现简易邮箱输入验证
01-20
本文中的代码将使用自定义全局组件，emit派发以及正则来实现一个简易的邮箱输入验证功能，用以验证邮箱地址格式是否正确，如果正确则在输入框的后方同步显示true，如果错误则显示false。 邮箱地址我们规定为： 前缀是字母、数字或者下划线，并且长度在3位以上15位以下，后缀是小写字母构成，且长度为2位或者3位。 例如：ab@152.cn                false（前缀不在3位以上）            sbd1221@163.com     true   下面为代码，已含适量注释： {{mail}} Vue.component('cu
vue实现Input输入框模糊查询方法
12-13
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下 原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。 如果在数组中没找到指定元素则返回 -1。 下面先看示例： 搜索前： 搜索后： 实现方法： methods:{ // 点击搜索工程 search(){ // 支持模糊查询 // this.xmgcqkJsonsData：用于搜
【vue】element-表单中，下拉框选中某个值后，同步更新其他输入框的值
m0_57484291的博客
05-18 7697
一、实现的效果 选中订单编号后，同步更新学生Id与退费金额这两个输入框的值 二、代码实现 如果选择器里的列表数据与需要同步更新的数据在同一个数组里则用方法一，若不在同一数组里用方法二，根据需要选用 template中代码：(方法一和二template中代码相同 在select中加change事件) <el-form-item label="订单编号" prop="order_id"> <div class="dingdanxinxiDIV"> ..
Vue在ElementUI下的input输入框中按下“点”按键自动跳转（聚焦）下一个输入框
奔跑的面条博客
03-24 3906
我是根据class去获取节点,因为elementUI会对input进行多一层的渲染，所以我们在获取到当前div节点之后还要去里面找到对应的input节点 这里是template <el-input @input="focusNextInput(0);" class="class1" v-model.number="first" ></el-input> &...
Element-ui输入框自动查询实现
小锋QQmm~~的香蕉乐园
12-04 1016
<template> <el-autocomplete v-model="input" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" prefix-icon="el-icon-search" @select="handleSelect" ><
表格嵌套el-input，实现输入一个数后自动填充另一个input
m0_55941180的博客
05-11 1524
需求：如图，要在表格中输入间距，根据1200/间距 = 数量公式，自动填充数量，同理通过输入数量，自动填充间距 话不多说，直接贴代码 结构部分： <el-table :data="channelInfo" border class="tpit-table" v-if="projecType === 'channel'"> <el-table-column prop="direction" width="70"> </el-table-column>
element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值
weixin_43937851的博客
08-10 3163
element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值
vue elementUi中两个输入框互相关联，实现同步更新功能
叁柒單木
01-10 4461
vue两框关联、elementUi中select的关联使用，两框同步刷新
当一个input框内容改变时自动算取另一个input框的内容
weixin_45723025的博客
10-25 542
情景还原：我是在项目中遇到 当变更价格时 根据现在的价格和以前的价格算出变更的比例 比例需要取整 比例取整相当于比例又发生了改变 这样价格也更着改变 会出现当输入一个价格后 价格经过计算因为比例四舍五入可能会出现价格冲计算后与输入的价格不一样的情况 可能我输入了1000 页面显示 1000.1 本来我是用的是 监听input框内容的方法 内容改变就触发相应的计算 后来发现存在上面的问题 解决方法是 只要输入框输入内容就走对应的方法。 ...
vue.js输入框输入值内容实时跟着变化
热门推荐
Code_Pupil的博客
03-24 1万+
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
使用react实现手机号的数据同步显示功能的示例代码
12-12
本文介绍了使用react实现手机号的数据同步显示功能的示例代码，分享给大家，具体如下： 要求如下 输入框输入内容数据长度大于0，展示出预览信息 光标离开关闭预览信息 预览信息每隔4位插入一个特殊字符_,输入...
Android项目源码CoCoin记账多报表云同步智能提醒.zip
07-10
如果开启颜色提醒，那么如果当月记录的支出总额超过了下一行中的数字（也就是“超过此数额时提醒”），记录界面的颜色主题会变化，以示提醒（这在Gif中有演示）。 可以自己设定提醒颜色。 可以限制自己在超出每月...
JAVA上百实例源码以及开源项目
01-03
　数字证书：从文件中读取数字证书，生成文件输入流,输入文件为c:/mycert.cer，获取一个处理X.509证书的证书工厂&hellip;&hellip; Java+ajax写的登录实例 1个目标文件 内容索引:Java源码,初学实例,ajax,登录 　一个Java+ajax写...
GHAlibabaSpecificationSelectionDemoiOS 仿阿里巴巴/电商规格选择器 电商通用规格选择器。
07-09
当 spu 颜色数量大于1个时，显示颜色导航，底部列表可以滚动，反之隐藏，布局自适应。如果有颜色导航，输入或点击 + - 按钮，颜色导航对应的颜色数字同步变化，如果数量大于99显示99+；如果数量小于1不显示。点击> &...
vue中输入框聚焦，自动跳转下一个输入框
蓝胖子的博客
02-02 1645
vue中输入框聚焦，自动跳转下一个输入框
input输入框输入，数据会同步显示
qq_53066188的博客
04-10 2564
目录 大三 的asd1
一个输入框输入内容，另一个输入框同步内容
zl_action的博客
04-12 9190
&lt;html&gt; &lt;head&gt; &lt;script&gt;     function cop(){         var str=document.getElementById("input1").value;         document.getElementById("input2").value = str;     } &lt;/script&gt; &lt;/
android 同步监听输入框，以及电话号码正则表达式！
tansitongba
05-13 137
下面这段程序主要为了实现以下三个功能： 一、同步监听文本输入框的变化，默认继承以下三个方法，分别监听文本改变前、中、后； 二、同时用正则表达式判断输入的电话号码是否合法； 三、最后在activity展示一秒后，跳出软键盘； package com.my; import java.util.Timer; import java.util.TimerTask; import j...
VUE element-ui之el-form表单点击按钮自动增加表单（输入框），可新增删除
HanXiaoXi_yeal的博客
07-01 1万+
VUE element-ui之el-form表单点击按钮自动增加表单（输入框），可新增删除
小程序input 只允许输入数字
最新发布
07-13
要限制小程序中的input输入只允许数字，可以结合使用input事件和正则表达式来实现。 首先，在input标签中添加一个input事件监听器，当用户输入内容时触发该事件。然后，在事件处理函数中使用正则表达式对用户输入的内容进行过滤，只保留数字。 以下是一个示例代码： ```html <view> <input type="text" bindinput="handleInput" /> </view> ``` 在上面的示例中，我们为input标签添加了一个bindinput事件，将事件绑定到名为handleInput的事件处理函数上。 接下来，在对应的js文件中，实现handleInput事件处理函数： ```javascript Page({ handleInput: function(e) { // 使用正则表达式过滤用户输入，只保留数字 const value = e.detail.value; const numValue = value.replace(/[^\d]/g, ''); // 更新输入框的值 this.setData({ inputValue: numValue }); } }); ``` 在handleInput函数中，我们首先获取用户输入的值，并使用正则表达式`/[^\d]/g`将非数字字符替换为空字符串。最后，使用setData方法将过滤后的值更新到页面数据的inputValue属性上。 最后，在wxml文件中，通过双花括号将页面数据的inputValue绑定到input标签的value属性上： ```html <view> <input type="text" bindinput="handleInput" value="{{inputValue}}" /> </view> ``` 这样，用户在输入框中只能输入数字，其他字符将被过滤掉。同时，输入框的值将始终与页面数据的inputValue保持同步。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值