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 ...
随机推荐
- 后端将Long类型数据传输到前端出现精度丢失的问题
当将超过16位的数字传输到前端的时候,就会出现精度丢失的问题,然后我按照网上的几种方法实验的时候,只有一种方法成功了.可能是因为环境等方面的问题. 我这里成功是因为:最后使用的是配置mvc的方式,然后 ...
- tomcat学习之路
一:介绍目录文件夹 bin文件夹:放置可执行文件 startup.bat:脚本文件,windows环境,起服务 shutdown.bat:脚本文件,windows环境,关闭 startup.sh:脚本 ...
- day001-在Windows下python环境的搭建
一.Python下载 1.Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: 2.Python官网:https://www.python.org/ 3.你可以在以下链接中下载 ...
- react语法注意事项
组件: var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.n ...
- Vsftpd 2.2.x安装和配置--centos7前的版本
Vsftpd 2.2.x安装和配置--centos7前的版本 原文链接:https://my.oschina.net/loubobooo/blog/1633367 1. 关闭防火墙和Selinux L ...
- 05_配置交换机SSH服务(数通华为)
1. 网络拓扑: 2. SW1配置:2.1 配置为Access口,vlan 10:[SW1]vlan 10[SW1-GigabitEthernet0/0/1]port link-type access ...
- Numpy | 01 简介
NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. NumPy 是一个运行速度非常快的数学库 ...
- dotnetcore docker 简单运行
今天试用了下mac 版本的dotnetcore sdk,发现还是很方便的,同时官方的容器运行方式,相对小了好多 同时使用多阶段构建的方式运行dotnetcore 安装sdk 下载地址: https:/ ...
- [RN] React Native 实现 类似京东 的 沉浸式状态栏和搜索栏
React Native 实现 类似京东 的 沉浸式状态栏和搜索栏 其原理其实就是在要 隐藏 部分的那个View 前面加入 StatusBar 代码! 代码如下: <StatusBar anim ...
- 关于windows10用c++部署libtorch过程中遇到的一些问题
libtorch1.0 vs2017 CMake3.14 windows10 无cuda 用c++调用pytorch模型官网上面有详细教程,也有很多博客,可以参考以下链接:https://blog.c ...