<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. php构建型模式(Builder pattern)

    练代码,增加了调用时的输出. <?php /* The builder pattern separates the construction of a complex object from i ...

  2. Discuz! 3.3全站帖子自动添加图片alt标签

    网站想要更好的适应搜索引擎的话,就要把最基础的一些小优化标签做好, 虽然说现在搜索都很厉害能够识别图片,但是除非的你的图片每一张都是周杰伦.范冰冰等知名图片... 不然你还是要给你自己的图添加alt标 ...

  3. includes方法 使用 Object.defineProperty 扩展 ,解决不兼容问题

    原文链接 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes ...

  4. [Algorithm] 46. Permutations

    Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...

  5. LeetCode 1081. Smallest Subsequence of Distinct Characters

    原题链接在这里:https://leetcode.com/problems/smallest-subsequence-of-distinct-characters/ 题目: Return the le ...

  6. firewall-cmd命令的富语言(richlanguage)示例

    一.为协议“ah”启用新的IPv4和IPv6连接 firewall-cmd --permanent --add-rich-rule 'rule protocol value="ah" ...

  7. kali linux 局域网攻击(一)

    一.攻击准备 此为局域网攻击测试 1)查看自己的IP地址,记住默认网关 2)扫描局域网中的IP fping -asg nbtscan -r 网关地址/  3)使用arpspoof进行断网攻击 攻击前, ...

  8. Spring Boot进阶系列一

    笔者最近在总结一个 Spring Boot实战系列,以方便将来查找和公司内部培训用途. 1.Springboot从哪里来 SpringBoot是由Pivotal团队在2013年开始研发.2014年4月 ...

  9. 【Dubbo】带着问题看源码:什么是SPI机制?Dubbo是如何实现的?

    什么是SPI? ​ 在Java中,SPI全称为 Service Provider Interface,是一种典型的面向接口编程机制.定义通用接口,然后具体实现可以动态替换,和 IoC 有异曲同工之妙. ...

  10. pdf怎么转换成word

    在线转换:https://app.xunjiepdf.com/pdf2word