通过ref来获取DOM节点

 1 <template>
 2   <div>
 3     <div ref="hello">
 4       hello world
 5     </div>
 6     <button @click="handleClick">我是按钮</button>
 7   </div>
 8 </template>
 9
10 <script>
11 export default {
12   name: ‘Home‘,
13   data () {
14     return {
15       arr: ‘‘
16     }
17   },
18   methods: {
19     handleClick () {
20       this.arr = this.$refs.hello.innerHTML //获取DOM元素节点的值
21       alert(this.arr)
22     }
23   }
24 }
25 </script>

【注意:在HTML中时ref,而在methods中是refs,因为在HTML中ref可能有很多,而在methods是通过总的ref来寻找】

原文地址:https://www.cnblogs.com/lanyb009/p/9235809.html

时间: 2024-10-04 00:40:11

通过ref来获取DOM节点的相关文章

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

JavaScript获取DOM节点HTML元素CSS样式

JavaScript获取DOM节点HTML元素CSS样式技术 maybe yes 发表于2015-01-10 18:07 原文链接 : http://blog.lmlphp.com/archives/59  来自 : LMLPHP后院 如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值?使用过 JQuery 的童鞋一定都非常的熟悉,Jquery 提供了非常强大的 CSS 方法,可以很方便的设置和获取元素的 style 属性. 某些情况下,我们不能使用 JQ

jQuery 获取DOM节点的两种方式

jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 2.使用函数get()访问,例如: var dom = $(dom).get(0); get()函数中的参数为索引号. 3.示例 var div = document.createElement("DIV"); div.innerText = "TEST IS OK!"; document.body.a

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

ionic2 获取dom节点

ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于getElementById), 在ts文件上面引入viewchild装饰器 然后在构造器里面声明使用@viewchild('name') name 就可以了,一般使用都是this.name这样子. 原文地址:https://www.cnblogs.com/huzhuhua/p/10236172.htm

vue怎么不通过dom操作获取dom节点

今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"> <input v-model="keyWord" @keyup.enter='startSearch()' class="searchBar-input" type="search" placeholder="搜索"

获取dom节点

如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值?使用过 JQuery 的童鞋一定都非常的熟悉,Jquery 提供了非常强大的 CSS 方法,可以很方便的设置和获取元素的 style 属性. 某些情况下,我们不能使用 JQuery 时,就必须使用纯 JavaScript 获取元素的 style 属性值.本文将介绍使用纯 JavaScript 获取元素的的样式值. 使用 CSS 控制页面的四种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式,下面分

jsp获取dom节点以及节点的文本值和参数属性值

1.获取节点的方式: 1)通过顶层获取节点: document.getElementById("");通过id获取节点的属性值.备注:如果包含多个相同ID的节点,只返回第一个节点 document.getElementsByName("");返回一组相同name元素的数组.然后通过判断属性来确定是否为需要的节点,以radio,CheckBox为例,通过判断check的属性是否为TRUE: document.getElementsByTagName();通过标签名来获

vue通过ref获取dom节点

HTML在任意节点上添加属性"ref" <span ref="span_01">span_01</span> <button @click="consoleDOM()">consoleDOM</button> SCRIPT vue里通过 this.$refs.xxx 获取 consoleDOM() { window.console.log(this.$refs.span_01) } 原文地址:htt