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提供的获 ...
随机推荐
- 图灵机器人API接口
调用图灵API接口实现人机交互 流程一: 注册 图灵机器人官网: http://www.tuling123.com/ 第一步: 先注册, 然后创建机器人, 拿到一个32位的key 编码方式 UTF-8 ...
- 洛谷P1462通往奥格瑞玛的道路题解
[题目]: https://www.luogu.org/problemnew/show/P1462 题意 题目是给定了一张双向边,有边权的图,然后让我们求出一个最小值,满足一条路径上的最大的费用小于这 ...
- [洛谷P1273] 有线电视网
类型:树形背包 传送门:>Here< 题意:给出一棵树,根节点在转播足球赛,每个叶子节点是一个观众在收看.每个叶子结点到根节点的路径权值之和是该点转播的费用,每个叶子节点的观众都会付val ...
- 图片文字识别aip的一个小Demo
目前接触到了一个新的内容,识别图片上的文字,以下是这个Demo 首先需要在需要在百度云-管理中心创建应用 地址:http://console.bce.baidu.com/ai/#/ai/ocr/app ...
- Node<T> 的作用
Java中常见到以下定义的类 public class Node<T> { T data; public Node<T> next; Node(T data) { this.d ...
- wstngfw IKEv2服务器配置示例
wstngfw IKEv2服务器配置示例 移动客户端的服务器配置有几个组件: 为***创建一个证书结构 配置IPsec移动客户端设置 为客户端连接创建阶段1和阶段2 添加IPsec防火墙规则 创建** ...
- haar的简单应用(2)
上次对图片进行了人脸识别,这次对摄像头捕获的内容进行识别 直接写注释来解释 import cv2 def CatchUsbVideo(window_name, camera_idx): #定义一个函数 ...
- [TJOI2012]桥(最短路+线段树)
有n个岛屿, m座桥,每座桥连通两座岛屿,桥上会有一些敌人,玩家只有消灭了桥上的敌人才能通过,与此同时桥上的敌人会对玩家造成一定伤害.而且会有一个大Boss镇守一座桥,以玩家目前的能力,是不可能通过的 ...
- 前端基础-- HTML
HTML知识 HTML介绍 Web服务本质 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 -- ...
- Arch Linux下Visual Stdio Code在格式化C代码时报错
libtinfo.so.5: cannot open shared object file: No such file or directory Arch Linux下Visual Stdio Cod ...