Vue 获取DOM元素ref
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<input type="button" value="获取元素" @click="getElement" ref="mybtn">
<!-- 这里ref是设置要获取的dom元素 -->
<h3 id="myh3" ref="my">哈哈哈， 今天天气太好了！！！</h3>
<hr>
<login ref="mylogin"></login>
</div> <script> var login = {
template: '<h1>登录组件</h1>',
data() {
return {
msg: 'son msg'
}
},
methods: {
show() {
console.log('调用了子组件的方法')
}
}
} // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// console.log(document.getElementById('myh3').innerText)
// ref 是 英文单词 【reference】 值类型 和 引用类型 referenceError
//注意用$refs 获取的原生的DOM对象
console.log(this.$refs.my.innerText)
console.log(this.$refs.mylogin.msg)
this.$refs.mylogin.show()
}
},
components: {
login
}
});
</script>
</body> </html>
Vue 获取DOM元素ref的更多相关文章
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- vue获取dom元素注意问题
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...
- Vue获取dom元素
<li @click='获取li标签' :ref="center-li" id="center-li" > =====我是li标 ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
- Vue 获取dom元素中的自定义属性值
方法一: HTML <div id="app"> <button @click="getData($event,'100')">点我&l ...
随机推荐
- hive-oracle-常用分析函数-窗口函数
常用的分析函数如下所列: row_number() over(partition by ... order by ...)rank() over(partition by ... order by . ...
- 【CF Manthan, Codefest 17 B】Marvolo Gaunt's Ring
[链接]h在这里写链接 [题意] 给你n个数字; 让你在其中找出三个数字i,j,k(i<=j<=k); 使得p*a[i]+q*a[j]+r*a[k]最大; [题解] /* 有一个要 ...
- JS中获取URL的参数的方法
这里,我学习的是使用正则的方法来获得URL的参数 函数的方法如下: <a href="www.baidu.com">百度</a> <script sr ...
- font-weight
font-weight 属性设置文本的粗细. 该属性用于设置显示元素的文本中所用的字体加粗.数字值 400 相当于 关键字 normal,700 等价于 bold. 每个数字值对应的字体加粗必须至少与 ...
- 浅谈Android开机启动速度优化（含应用程序启动速度优化）
众所周知Android开机启动速度较慢,于是如何加快启动速度便成为一个值得讨论的问题. 在查阅过许多资料后(特别是Google Group的android-platform),我整理总结出下面几点基本 ...
- iOS block 用法
1.定义Block /* 回传void ,参数也是void 的block*/ void (^blockReturningVoidWithVoidArgument)( void ); /* 回传整数,两 ...
- C#创建日志方法
1.通过流的方式 public void WriteLog(string log) { StreamWriter stream; string path = "D:/WriteLog/&qu ...
- 【JZOJ4896】【NOIP2016提高A组集训第16场11.15】兔子
题目描述 在一片草原上有N个兔子窝,每个窝里住着一只兔子,有M条路径连接这些窝.更特殊地是,至多只有一个兔子窝有3条或更多的路径与它相连,其它的兔子窝只有1条或2条路径与其相连.换句话讲,这些兔子窝之 ...
- java 使用 POI 操作 XWPFDocumen 创建和读取 Office Word 文档基础篇
注:有不正确的地方还望大神能够指出,抱拳了 老铁! 参考 API:http://poi.apache.org/apidocs/org/apache/poi/xwpf/usermodel/XWPFDoc ...
- Leetcode796.Rotate String旋转字符串
给定两个字符串, A 和 B. A 的旋转操作就是将 A 最左边的字符移动到最右边. 例如, 若 A = 'abcde',在移动一次之后结果就是'bcdea' .如果在若干次旋转操作之后,A 能变成B ...