<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对象示例的更多相关文章

  1. nuxtjs在vue组件中使用window对象编译报错的解决方法

    我们知道nuxtjs是做服务端渲染的,他有很多声明周期是运行在服务端的,以及正常的vue声明周期mounted之前均是在服务端运行的,那么服务端是没有比如window对象的location.navag ...

  2. js中的DOM对象和jQuery对象的比较

    1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...

  3. 在OCX初始化时获取其在网页中的DOM对象

    OCX初始化的时候会调用SetClientSite,会传入IOleClientSite对象. CComQIPtr<IOleControlSite, &IID_IOleControlSit ...

  4. js中的DOM对象 和 jQuery对象 比较

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  5. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  6. Python向方法中传递自定义类型参数

    定义类型 class Fish: def __init__(self,x): self.num = xclass Turtle: def __init__(self,y): self.num = yc ...

  7. Jquery-获取iframe中的dom对象

    父窗口中操作iframe: $(window.frames["iframeChild"].document) //假如iframe的id为iframeChild 在子窗口中操作父窗 ...

  8. jquery获取iframe中的dom对象

    父窗口中操作iframe:$(window.frames["iframeChild"].document)    //假如iframe的id为iframeChild 在子窗口中操作 ...

  9. JS中的DOM对象及JS对document对像的操作

    DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...

随机推荐

  1. 磁盘提示“X:拒绝访问”问题解决

    cacls "D:\*.*" /T /E /G Administrators:F cacls "D:\*.*" /T /E /G Users:F cacls & ...

  2. vo bo po dao pojo dto

    Recommended for you: Get network issues from WhatsUp Gold.  Not end users. DAO: Data access object d ...

  3. Generative Adversarial Networks overview(2)

    Libo1575899134@outlook.com Libo (原创文章,转发请注明作者) 本文章会先从Gan的简单应用示例讲起,从三个方面问题以及解决思路覆盖25篇GAN论文,第二个大部分会进一步 ...

  4. Codechef July Challenge 2019 Snake and Apple Tree

    费用流.把每个方格拆成 $T$ 个点,$t$ 时刻一个方格向周围四个方格的 $t + 1$ 的点连一条容量为 $1$ 费用为 $0$ 的边,向自身的 $t + 1$ 连一条容量为 $1$ 费用为该方格 ...

  5. (10)树莓派 vim编辑器使用

    进去后 1点击 insert 插入数据 2 ctrl+alt+c  粘贴内容 或者 手动敲入代码 3 ctrl+v     保存 4 :wq  保存退出 5 回车

  6. 通过patch 方式解决cube.js 集成cratedb 的问题

    今天有写过一个简单的cube.js 集成cratedb 的说明,主要是在driver 上的兼容问题,处理方法是删除不兼容的代码 实际上我们也可以通过类似linux c 开发中的patch 方式解决,简 ...

  7. A1113 | Integer Set Partition (25)

    太简单了 #include <stdio.h> #include <memory.h> #include <math.h> #include <string& ...

  8. nginx 反向代理之 proxy_set_header

    proxy_set_header用来设定被代理服务器接收到的header信息. 语法:proxy_set_header field value; field :为要更改的项目,也可以理解为变量的名字, ...

  9. ImportError: No module named 'typing'

    k@ubuntu:~/Desktop/virtualenv$ python3 Python ( , ::) [GCC ] on linux Type "help", "c ...

  10. [技术博客] 用户验证码验证机制---redis缓存数据库的使用

    目录 问题引入 初识redis 实际应用 作者:马振亚 问题引入 在这次的开发过程中,我们的需求中有一个是普通用户可以通过特定的机制申请成为社长.因为只有部分人才能验证成功,所以这个最开始想了两种思路 ...