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 ...
随机推荐
- 磁盘提示“X:拒绝访问”问题解决
cacls "D:\*.*" /T /E /G Administrators:F cacls "D:\*.*" /T /E /G Users:F cacls & ...
- vo bo po dao pojo dto
Recommended for you: Get network issues from WhatsUp Gold. Not end users. DAO: Data access object d ...
- Generative Adversarial Networks overview(2)
Libo1575899134@outlook.com Libo (原创文章,转发请注明作者) 本文章会先从Gan的简单应用示例讲起,从三个方面问题以及解决思路覆盖25篇GAN论文,第二个大部分会进一步 ...
- Codechef July Challenge 2019 Snake and Apple Tree
费用流.把每个方格拆成 $T$ 个点,$t$ 时刻一个方格向周围四个方格的 $t + 1$ 的点连一条容量为 $1$ 费用为 $0$ 的边,向自身的 $t + 1$ 连一条容量为 $1$ 费用为该方格 ...
- (10)树莓派 vim编辑器使用
进去后 1点击 insert 插入数据 2 ctrl+alt+c 粘贴内容 或者 手动敲入代码 3 ctrl+v 保存 4 :wq 保存退出 5 回车
- 通过patch 方式解决cube.js 集成cratedb 的问题
今天有写过一个简单的cube.js 集成cratedb 的说明,主要是在driver 上的兼容问题,处理方法是删除不兼容的代码 实际上我们也可以通过类似linux c 开发中的patch 方式解决,简 ...
- A1113 | Integer Set Partition (25)
太简单了 #include <stdio.h> #include <memory.h> #include <math.h> #include <string& ...
- nginx 反向代理之 proxy_set_header
proxy_set_header用来设定被代理服务器接收到的header信息. 语法:proxy_set_header field value; field :为要更改的项目,也可以理解为变量的名字, ...
- ImportError: No module named 'typing'
k@ubuntu:~/Desktop/virtualenv$ python3 Python ( , ::) [GCC ] on linux Type "help", "c ...
- [技术博客] 用户验证码验证机制---redis缓存数据库的使用
目录 问题引入 初识redis 实际应用 作者:马振亚 问题引入 在这次的开发过程中,我们的需求中有一个是普通用户可以通过特定的机制申请成为社长.因为只有部分人才能验证成功,所以这个最开始想了两种思路 ...