vue中oninput和@input区别

已于 2024-09-05 11:22:18 修改
阅读量394 收藏
点赞数 1
分类专栏： WEB前端 文章标签： vue.js javascript 前端
于 2024-09-05 11:20:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maryword/article/details/141924488
版权

使用oninput绑定，此方法会导致中文输入法情况下，v-model和value不一致，原因是在中文输入法情况下vue中的v-model会自动return，v-mode绑定的值不变，value绑定的值可变。

:οninput="value=value.replace(/\D/g,'')"

@input="row[item.prop]=row[item.prop].replace(/\D/g,'')"

参考文档：https://blog.csdn.net/weixin_43979556/article/details/121443225

Hey,Girl
关注
专栏目录
vue @input带参数_Vue组件通信详解
weixin_39973410的博客
11-20 882
使用Vue进行项目开发，碰到的比较多的问题就是如何进行组件之间的参数传递。为了能够更优雅的解决此类问题，笔者在这里总结了开发中经常用到的一些组件通信方式，并配合一些例子方便理解。 源码地址：vue-component-communication 在线访问每一小节的例子都在src/views目录中，小伙伴可以结合对应的代码来阅读文章。码字不易，如果文章内容对你有帮助的话，希望能点赞鼓励一下作者。 注...
vue中input绑定事件
qq_32538087的博客
03-25 5807
做的越多遇到的问题越多，解决的问题越多，你会的就越多，加油 我们都知道vue中是可以双向数据绑定的，但是有时候我们的事件会和双向绑定冲突。 input中如果用了v-model，那么给它绑定的事件就不会执行。 我遇到的问题是：因为是数组，给input绑定了一个值，绑定的change事件不会执行。所以把绑定数据改成把值绑定到value上，两个都是绑定，但是value是input原有的属性。（希望...
还在使用onInput 控制input控件输入方式？
weixin_58572700的博客
06-23 282
这几天有遇到这么个问题，很平常的需求哈，就是我们输入框只能输入数字，不能输入字母或者其他的特殊字符，这还是比较常见的操作哈，然后那天提测前我自测了一下，发现有个问题比如说我们现在的el-input使用oninput的属性利用replace的方法进行替换，就会发现，如果在中文的情况下输入，虽然这个输入框限制了你输入的文字，但是当我再次输入数字的时候就会发现，el-form的校验并不会校验成功，但是明明输入框中是有数字的。那我们就另辟蹊径换一种写法呗，我们可以使用@input的方法，就可以完美的解决问题。
vue @input带参数_Vue基础教程
weixin_39946274的博客
11-20 827
vue基础引入vue一个基本的vue程序 {{ message }}模板语法{{ messges}}模板语法, 支持丰富的表达式{{ msg +1 }}{{ ok? 'Yes' : 'No' }}{{ msg.split('').reverse.join('') }}使用v-once, 则模板中参数不会被之后的变动改变{{ msg }}v-html, 将数据以html方式解析:this sh...
Vue中输入框仅支持数字输入
最新发布
南城
07-31 1623
通过监听 @input 事件并使用正则表达式来验证输入，只允许输入数字。
详解.vue文件中监听input输入事件（oninput）
08-29
本篇文章主要介绍了详解.vue文件中监听input输入事件（oninput），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中输入框事件的使用——@input、@keyup.enter、@change、@blur
热门推荐
zuo-yiran的博客
01-23 17万+
一、@input（或者是v-on:input） 使用： <input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal" v-on:input="search" value="" /> 适用于实时查询，每输入一个字符都会触发该事件。如图： 二、@keyup.enter 该事件与v-on:input事件的区别在于：i
VUE中的@input
qq_47443027的博客
05-10 9327
@input 一般用于监听事件 只要输入的值变化了就会触发input <input type="text" :value="dnumber1" @input="num1Input"> methods: { num1Input(event) { this.dnumber1 = event.target.value; this.$emit('num1c..
vue中@oninput的用法
CaseyWei
11-06 2万+
.vue文件其实是一个组件，今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中，改变input的值，就调用一个事件，第一想到的是oninput。 oninput 事件在用户输入时触发，菜鸟教程中的用法是： 但是在.vue中这样写是没有作用的： &lt;input type="text" id="cardsNum2"  value="1" @oninput ="i...
Vue input
weixin_30477797的博客
12-17 290
.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > .number 如果想自动将用户的输入值转为 Number 类型（如...
vue中input的v-model清空操作
12-08
`v-model`本质上是Vue中的一种简写，它会同时设置`v-bind:value`和`v-on:input`。例如，`<input v-model="inputValue">`等同于`<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">`...
Vue实现input宽度随文字长度自适应操作
10-15
<input type="text" id="my-input" oninput="changeWidth()"> ;"> ``` 以上两种方法都可以实现Vue中input宽度的自适应。第一种方法适用于输入内容长度较短且对宽度要求不高的场景；而第二种方法则更加精确，适合...
input中的 oninput和@blur事件
小破孩的博客
12-03 1283
oninput事件： <el-input v-model="form.peacetime" minLength="1" maxlength="8" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入"></el-input> oninput="value=value.replace(/[^\d.]/g,'')" 此方法验证了输入框只能输入数字并且大于0 @blur事件 <el-input v-m.
Vue 输入框组件 @input、@keyup.enter、@change、@blur
且听风吟的博客
02-16 3544
input input 事件结合了 keyup事件 和 change事件，会在keyup时判断值是否发生变化，变化了则触发该事件。 input 一般用于实时监听事件，只要输入的值变化了就会触发input。 keyup.enter keyup.enter事件是在pc上点击回车键触发，在手机上是需要点击输入键盘上的确定键触发。 click @click 与enter事件相似，在手机上都是要经过触发的虚拟键盘才会触发事件，一般用于触发事件。 blur blur(失焦)是输入框在输入完成、失去焦点，移到其他地方触发
【Vue】组件封装——input输入框_vue input
2401_84419009的博客
04-27 731
所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。我们需要在 register.vue 中为 input.vue 绑定自定义事件, 子组件将数据以参数的形式传给父组件,并触发。对 error_message 进行数据监视, 每当error_message发生改变时,就进行一次提示。​ 格式无误: 将 input_data 中的state修改为true.中对输入框的信息进行设置, 并传给子组件。根据父组件传过来的数据。
vue三种常用获取input值写法
June.1
03-20 10万+
1. v-model 表单输入绑定 使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 <template> <div> <input class="login-input" type="text" v-model="username" placeholder="请输入账...
Vue组件封装 ——input 输入框组件
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-31 1万+
一、基础准备工作 1、创建一个基础的vue项目包 2、创建components文件夹，用于存放组件，新建input.vue组件，可以自己取个名字 <script> export default { name: "CatInput", }; </script> 3、在main.js中引入组件 import CatInput from "./components/input.vue"; Vue.component(CatInput.name, CatInput)..
Vue中@input用法以及v-model示例
sinat_41747081的博客
11-26 1万+
<input :value="value" @input="updateValue" placeholder="edit me"> @input是input框中的值变化时触发的函数。 以下示例是：input内容变化时，下面的内容也跟着变化。 <div id="app"> <com v-model="message"></com> ...
vue @input带参数_Vue模板
weixin_39895881的博客
11-20 769
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。文本数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：文本插值:<!D...
vue监听input输入事件oninput
05-01
Vue中的oninput是监听input输入事件的一种方式。一般情况下，我们将oninput事件绑定到一个输入框上，在用户输入时，oninput事件会自动被执行。 当用户在输入框中输入内容时，Vue会根据当前输入框的值自动更新绑定的数据模型，从而实现了数据的双向绑定。这种双向绑定的特性极大地方便了我们在开发过程中对于用户输入数据的处理。 另外，Vue还提供了一些其他的input事件，比如onchange，onblur等等。每个事件有其特殊的用途，我们需要根据不同的需求来选择使用不同的事件。 总之，Vue的oninput事件是一个非常有用的功能，可以让我们更加方便地处理用户输入数据，提高开发效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值