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 ...
随机推荐
- php构建型模式(Builder pattern)
练代码,增加了调用时的输出. <?php /* The builder pattern separates the construction of a complex object from i ...
- Discuz! 3.3全站帖子自动添加图片alt标签
网站想要更好的适应搜索引擎的话,就要把最基础的一些小优化标签做好, 虽然说现在搜索都很厉害能够识别图片,但是除非的你的图片每一张都是周杰伦.范冰冰等知名图片... 不然你还是要给你自己的图添加alt标 ...
- includes方法 使用 Object.defineProperty 扩展 ,解决不兼容问题
原文链接 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes ...
- [Algorithm] 46. Permutations
Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...
- LeetCode 1081. Smallest Subsequence of Distinct Characters
原题链接在这里:https://leetcode.com/problems/smallest-subsequence-of-distinct-characters/ 题目: Return the le ...
- firewall-cmd命令的富语言(richlanguage)示例
一.为协议“ah”启用新的IPv4和IPv6连接 firewall-cmd --permanent --add-rich-rule 'rule protocol value="ah" ...
- kali linux 局域网攻击(一)
一.攻击准备 此为局域网攻击测试 1)查看自己的IP地址,记住默认网关 2)扫描局域网中的IP fping -asg nbtscan -r 网关地址/ 3)使用arpspoof进行断网攻击 攻击前, ...
- Spring Boot进阶系列一
笔者最近在总结一个 Spring Boot实战系列,以方便将来查找和公司内部培训用途. 1.Springboot从哪里来 SpringBoot是由Pivotal团队在2013年开始研发.2014年4月 ...
- 【Dubbo】带着问题看源码:什么是SPI机制?Dubbo是如何实现的?
什么是SPI? 在Java中,SPI全称为 Service Provider Interface,是一种典型的面向接口编程机制.定义通用接口,然后具体实现可以动态替换,和 IoC 有异曲同工之妙. ...
- pdf怎么转换成word
在线转换:https://app.xunjiepdf.com/pdf2word