vue中oninput和@input区别

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

vue中input绑定事件
qq_32538087的博客
03-25 5889
做的越多遇到的问题越多，解决的问题越多，你会的就越多，加油 我们都知道vue中是可以双向数据绑定的，但是有时候我们的事件会和双向绑定冲突。 input中如果用了v-model，那么给它绑定的事件就不会执行。 我遇到的问题是：因为是数组，给input绑定了一个值，绑定的change事件不会执行。所以把绑定数据改成把值绑定到value上，两个都是绑定，但是value是input原有的属性。（希望...
vue @input带参数_Vue组件通信详解
weixin_39973410的博客
11-20 996
使用Vue进行项目开发，碰到的比较多的问题就是如何进行组件之间的参数传递。为了能够更优雅的解决此类问题，笔者在这里总结了开发中经常用到的一些组件通信方式，并配合一些例子方便理解。 源码地址：vue-component-communication 在线访问每一小节的例子都在src/views目录中，小伙伴可以结合对应的代码来阅读文章。码字不易，如果文章内容对你有帮助的话，希望能点赞鼓励一下作者。 注...
vue input框输入正则限制
半梅芒果干的博客
12-29 3512
【代码】vue input框输入正则限制。
vue 项目输入框中 用 oninput
Devin_Chen的博客
01-13 2864
vue + element 项目中需要根据输入的值，立即对输入框的数据进行判断; 如果使用 @change ,只有在失去焦点的时候触发； 这个时候可以用 oninput 监听 oninput oninput 事件在用户输入时触发。 该事件在 <input> 或 <textarea> 元素的值发生改变时触发。 提示：该事件类似于 onchange事件。不同之...
详解.vue文件中监听input输入事件（oninput）
08-29
本篇文章主要介绍了详解.vue文件中监听input输入事件（oninput），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中@oninput的用法
CaseyWei
11-06 2万+
.vue文件其实是一个组件，今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中，改变input的值，就调用一个事件，第一想到的是oninput。 oninput 事件在用户输入时触发，菜鸟教程中的用法是： 但是在.vue中这样写是没有作用的： &lt;input type="text" id="cardsNum2"  value="1" @oninput ="i...
oninput vue 中的用法
IT_iosers的博客
09-17 2170
第一种 <div class="inputStyle"> <input oninput="if(value.length>11)value=value.slice(0,11)" v-model="codeParams.mobile" placeholder="请输入手机号" type="number" /> </div> 第二种 <div class="content-item"> &lt
VUE中的@input
qq_47443027的博客
05-10 9453
@input 一般用于监听事件 只要输入的值变化了就会触发input <input type="text" :value="dnumber1" @input="num1Input"> methods: { num1Input(event) { this.dnumber1 = event.target.value; this.$emit('num1c..
vue中输入框事件的使用——@input、@keyup.enter、@change、@blur
热门推荐
zuo-yiran的博客
01-23 17万+
一、@input（或者是v-on:input） 使用： &lt;input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal" v-on:input="search" value="" /&gt; 适用于实时查询，每输入一个字符都会触发该事件。如图： 二、@keyup.enter 该事件与v-on:input事件的区别在于：i
Vue v-for中的 input 或 select的值发生改变时触发事件操作
01-18
oninput 如果需要在Vue中使用则需要写成 v-on:input 还有绑定id的时候这样写:id=”‘m_num’+index” 注意m_num必须用单引号引起来 <input type=”number” :id=”‘m_num’+index” v-on:input=”jsMoney(index...
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 1361
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的@input
_JS的博客
02-03 1119
vue中获取原生input输入框之前的值和现在的值。
vue @input带参数_Vue基础教程
weixin_39946274的博客
11-20 875
vue基础引入vue一个基本的vue程序 {{ message }}模板语法{{ messges}}模板语法, 支持丰富的表达式{{ msg +1 }}{{ ok? 'Yes' : 'No' }}{{ msg.split('').reverse.join('') }}使用v-once, 则模板中参数不会被之后的变动改变{{ msg }}v-html, 将数据以html方式解析:this sh...
Vue input
weixin_30477797的博客
12-17 318
.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > .number 如果想自动将用户的输入值转为 Number 类型（如...
vue文件中监听input输入事件-oninput
baozisss的博客
03-01 1066
vue文件其实是一个组件，关于它的说明我之前也写过一篇文章，地址： .vue文件，今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中，改变input的值，就调用一个事件，第一想到的是oninput。 oninput 事件在用户输入时触发，菜鸟教程中的用法是： 但是在.vue中这样写是没有作用的： &lt;input type="text" id="cardsNu...
vue中的@input事件
qq_31749421的博客
05-03 6455
@input（或者是v-on:input） <input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal" v-on:input="search" value="" /> 适用于实时查询，只要输入框里面的value值发生变化，如每输入一个字符都会触发该事件。如图： ...
Vue 输入框组件 @input、@keyup.enter、@change、@blur
且听风吟的博客
02-16 3894
input input 事件结合了 keyup事件 和 change事件，会在keyup时判断值是否发生变化，变化了则触发该事件。 input 一般用于实时监听事件，只要输入的值变化了就会触发input。 keyup.enter keyup.enter事件是在pc上点击回车键触发，在手机上是需要点击输入键盘上的确定键触发。 click @click 与enter事件相似，在手机上都是要经过触发的虚拟键盘才会触发事件，一般用于触发事件。 blur blur(失焦)是输入框在输入完成、失去焦点，移到其他地方触发
vue2中oninput调用不了方法
最新发布
11-13
在 Vue.js v2 中，`@input` 事件是用来监听元素内容改变的，它通常用于处理表单输入实时更新的情况。如果你发现 `@input` 无法触发方法调用，可能是以下几个原因： 1. **绑定错误**：确保你在模板上正确地绑定了 `v-model` 或者 `@input`。例如，如果想监听一个文本框的变化，应该是这样写的： ```html <input type="text" v-model="yourModelName" @input="handleInputChange"> ``` 2. **方法名拼写或大小写错误**：检查 `handleInputChange` 函数是否已存在，以及函数名是否有误。 3. **作用域问题**：如果该方法是在组件内的局部方法，确保该方法在正确的作用域内，可以考虑将其放在 `methods` 对象里。 4. **异步问题**：`@input` 的触发依赖于浏览器对 DOM 的更新。如果数据变化发生在 Vue 更新渲染之前，你可能需要手动调用 `this.$forceUpdate()` 来触发更新。 5. **阻止默认行为**：有时其他插件或库可能会阻止了原生的 `input` 事件，你需要确认是否无意中阻止了 `@input` 的触发。 如果你能提供具体的代码片段，我可以帮助你更好地诊断问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值