vue-获取dom节点
获取dom节点可以用ref属性,这个属性就是来获取dom对象的。看代码 这个属性就相当于给这个标签起了一个id样的东西
<input type="text" ref="userinfo" /> //获取ref定义的dom节点
console.log(this.$refs.userinfo);
alert(this.$refs.userinfo.value);
还有另外一种方法 仅限于点击事件
<input @input="handleInput" :value="value"/>
handleInput (event) {
const value = event.target.value
this.$emit('input', value)
}
vue-获取dom节点的更多相关文章
- vue的数据双向绑定和ref获取dom节点
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...
- Vue 双向数据绑定、事件介绍以及ref获取dom节点
vue是一个MVVM的框架 M model V view MVVM model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
- ionic2 获取dom节点
ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- Omi框架学习之旅 - 获取DOM节点 及原理说明
虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...
随机推荐
- DRF 版本和认证
Django Rest Framework 版本控制组件 DRF的版本 版本控制是做什么用的, 我们为什么要用 首先我们要知道我们的版本是干嘛用的呢~~大家都知道我们开发项目是有多个版本的~~ 当我们 ...
- Fence Repair POJ - 3253 哈夫曼思想 优先队列
题意:给出一段无限长的棍子,切一刀需要的代价是棍子的总长,例如21切一刀 变成什么长度 都是代价21 列如7切成5 和2 也是代价7题解:可以利用霍夫曼编码的思想 短的棍子就放在底层 长的尽量切少一次 ...
- python中切片的理解
Python中什么可以切片 l Python中符合序列的有序序列都支持切片(slice) l 如:列表,字符,元祖 Python中切片的格式 l 格式:[start : end : step] ...
- Linux qemu-nbd mount qemu disk image
Linux qemu-nbd mount qemu disk image deepin@deepin:~$ deepin@deepin:~$ qemu-nbd --help Usage: qemu-n ...
- Dockerfile基础
Dockerfile基础Dockerfile分四部分组成: 基础镜像.维护者信息.镜像操作指令.启动时命令ps: 我的本地镜像已经有centos,若没有请使用docker pull centos 入门 ...
- LVS-Keepalived高可用集群(DR)
LVS-DR+Keepalived高可用集群 -------client------------------主LVS--------------------从LVS------------------ ...
- 协同过滤算法 teamCF
http://www.infoq.com/cn/articles/recommendation-algorithm-overview-part02
- PyCharm创建自定义代码段(JetBrains系列通用)
创建自定义代码段或者修改代码段:(用习惯了VSCode的main格式,固而改下)
- 深入学习semaphore
深入学习semaphore 控制同时访问资源线程数 访问特定资源前,先使用acquire(1)获得许可,如果许可数量为0,该线程则一直阻塞,直到有可用许可. 访问资源后,使用release()释放许可 ...
- JavaScript面向对象--记录防忘记(一)
1.理解对象: 创建自定义对象最简单的方式就是创建一个object实例,再给他添加属性和方法. let person = new Object(); person.name = 'zhangsan'; ...