vue方法中传递dom对象示例
<div id="app">
<input type="text" v-on:keyup="onlyNum($event)">
</div> <script>
new Vue({
el:"#app",
methods: {
onlyNum: function (event){
event.target.value=event.target.value.replace(/[^\d]/g,'');
}
}
})
</script>
相当于:
<div id="app">
<input type="text" onkeyup="onlyNum(this)">
</div> <script>
function onlyNum(obj){
obj.value = obj.value.replace(/[^\d]/g,'');
}
</script>
js 原生代码的 “this” 相当于上面vue中 “event.target” 。js中事件绑定this,this指的是调用该函数的html元素;但vue的this指的是vue的对象本身,属于js对象方法中绑定this的情形;如果要访问调用该函数的html元素,只能用js的event对象中的target属性。
JavaScript this 关键字
注意:event是js的对象!
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
event对象知识见这里
event.target见这里
vue方法中传递dom对象示例的更多相关文章
- nuxtjs在vue组件中使用window对象编译报错的解决方法
我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navag ...
- js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
- 在OCX初始化时获取其在网页中的DOM对象
OCX初始化的时候会调用SetClientSite,会传入IOleClientSite对象. CComQIPtr<IOleControlSite, &IID_IOleControlSit ...
- js中的DOM对象 和 jQuery对象 比较
一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- Python向方法中传递自定义类型参数
定义类型 class Fish: def __init__(self,x): self.num = xclass Turtle: def __init__(self,y): self.num = yc ...
- Jquery-获取iframe中的dom对象
父窗口中操作iframe: $(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作父窗 ...
- jquery获取iframe中的dom对象
父窗口中操作iframe:$(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作 ...
- JS中的DOM对象及JS对document对像的操作
DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...
随机推荐
- Java精通并发-Lock与synchronized关键字在底层的区别及实例分析
在上两次中已经将Lock这个接口的整个官方说明进行了阅读,这次来了解一下它的一个非常重要的实现类: 啥叫“可重入”呢?其实是指一个线程已经拿到了锁,然后该线程还能再次获取这把锁,接下来在了解它之前先用 ...
- HDU3605 Escape(最大流判满流 + 状压)
[题意]: 有N个人,M个星球,给N*M矩阵,(i, j)为1代表i可以到j星球,0代表不能,问是否能把所有人转移走. [思路]: N的范围为1e6,如果让每个人与星球连边一定TLE,再根据矩阵每一行 ...
- Linux的sz和rz命令
工作中需要在Linux和Windows之间传输文件时,一般使用winscp或者ftp工具来完成,最近才知道有sz和rz这两个命令,方便好用. sz 下载 从Linux下载文件到本机 , 在Linux ...
- java多线程的几种实现方式
java多线程的几种实现方式 1.继承Thread类,重写run方法2.实现Runnable接口,重写run方法,实现Runnable接口的实现类的实例对象作为Thread构造函数的target3.通 ...
- Java Mail 异常
Java Mail 异常 java.lang.NoClassDefFoundError: com/sun/mail/util/LineInputStream 解决方案: 把Jar包换一个比较高的版本就 ...
- python基础语法10 函数递归,模块,软件开发目录规范
函数递归: 函数递归指的是重复 “直接调用或间接调用” 函数本身, 这是一种函数嵌套调用的表现形式. 直接调用: 指的是在函数内置,直接调用函数本身. 间接调用: 两个函数之间相互调用间接造成递归. ...
- Type Encodings
https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/ObjCRuntimeGuide/Articles ...
- 强制结束虚拟机 centos home 卷丢失导致无法挂载进入 emergency mode 紧急模式
参考文章: https://blog.51cto.com/13059784/2054378 xfs文件修复参考1:https://codeday.me/bug/20181112/367781.html ...
- There is insufficient memory for the Java Runtime Environment to continue.
There is insufficient memory for the Java Runtime Environment to continue.
- javascript利用canvas解析图片中的二维码
本方法两种应用方式:一种使用canvas解析本站图片中的二维码,canvas有同源策略限制,只能处理本站图片.另一种处理文件选择中的图片二维码. 第一种使用场景可以换成像微信中一样,长按图片识别二维码 ...