详解.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 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
node.js require() 源码解读
Dec 13 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 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中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
django rest framework 过滤时间操作
2020/07/12 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
校园创业策划书
2014/01/14 职场文书
市场营销求职信范文
2014/02/21 职场文书
上课看小说检讨书
2014/02/22 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
中秋客户感谢信
2015/01/22 职场文书
管理失职检讨书
2015/05/05 职场文书
学校运动会通讯稿
2015/07/18 职场文书