详解.vue文件中监听input输入事件(oninput)


Posted in Javascript onSeptember 19, 2017

.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput。

oninput 事件在用户输入时触发,菜鸟教程中的用法是:

详解.vue文件中监听input输入事件(oninput)

但是在.vue中这样写是没有作用的:

详解.vue文件中监听input输入事件(oninput)

<input type="text" id="cardsNum2" value="1" @oninput ="inputFunc">

这样写也没有作用:

详解.vue文件中监听input输入事件(oninput)

<input type="text" id="cardsNum2" value="1" v-on:oninput ="inputFunc">

最后,这样写才起作用:

详解.vue文件中监听input输入事件(oninput)

<input type="text" id="cardsNum2" value="1" v-on:input ="inputFunc">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 #Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 #Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 #Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 #Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 #Javascript
vue 粒子特效的示例代码
Sep 19 #Javascript
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
You might like
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
原生js实现查询天气小应用
2016/12/09 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python递归计算N!的方法
2015/05/05 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
个人收入证明范本
2014/01/12 职场文书
信访工作者先进事迹
2014/01/17 职场文书
主题酒店策划书
2014/01/28 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
岗位职责说明书模板
2014/07/30 职场文书
领导欢迎词范文
2015/01/26 职场文书
学校捐款活动总结
2015/05/09 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server