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 ...
随机推荐
- Nginx——跨域造成的504问题
前言 前台域名和后台域名是两个不同不同的二级域名,访问的时候造成了跨域,出现了504错误 解决 修改Nginx配置,将超时的时间设置为1200秒 keepalive_timeout 1200; pro ...
- Collections.synchronizedList使用
1.SynchronizedList类具体代码: static class SynchronizedList<E> extends SynchronizedCollection<E& ...
- UI系统的表示与维护
UI系统的表示与维护: 渲染单元的组织.维护.交互.解释.渲染. UI系统在应用层连接着视图的表示,在系统层连接着视图的绘制. 一.UI的结构 树形结构 二.UI的描述: 1.UI系统或UIkit或U ...
- linux 查看硬盘使用情况
在windows系统中,我们可以很容易的查看磁盘的使用情况,在linux系统中,我们可以使用命令来查看磁盘使用情况. 1.df命令 作用:用来查看硬盘的挂载点,以及对应的硬盘容量信息.包括硬盘的总大小 ...
- 最小球覆盖——模拟退火&&三分套三分套三分
题目 给出 $N(1 \leq N \leq 100)$ 个点的坐标 $x_i,y_i,z_i$($-100000 \leq x_i,y_i,z_i \leq 100000$),求包围全部点的最小的球 ...
- 如何保证javascript算数计算结果的精度
前言: 我们先看如下这个js的代数计算结果,什么? 明显不是我们想要的结果3.52!! 备注:其实这个小数计算精度问题,在弱类型语言python等语言中同样存在. 问题原因之所在: JavaScrip ...
- 使用Maven创建一个普通java项目
1.创建项目: 使用Maven目的是是我们能够轻松的管理各种别人写过的包 创建好之后,我们去找我们所需要的包:在mvnrepository.com中找自己所需要的包 例子: 最后将依赖写入pom.xm ...
- 关于单片机的RAM
一块RAM 分为了 堆 和 栈 名词而已,知道就可以了, 各种内存溢出问题: 全局数组访问越界 出现的问题:直接重启,或者死机 解决办法 : 额,写好自己的程序吧!!!!!!! 函数的局部变量过 ...
- 中心极限定理(Central Limit Theorem)
中心极限定理:每次从总体中抽取容量为n的简单随机样本,这样抽取很多次后,如果样本容量很大,样本均值的抽样分布近似服从正态分布(期望为 ,标准差为 ). (注:总体数据需独立同分布) 那么样本容量n应 ...
- pandas批量读取带有日期的文件夹简单操作
工作中碰到了这样一个数据处理的问题,想让你把某个文件夹下的子文件夹中的excel表级联成为1张表,用excel来做会很浪费时间并且很劳累,这时候我们就可以用pandas来加大工作效率,只需要半个小时就 ...