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 ...
随机推荐
- FatMouse' Trade (贪心)
#include <iostream> #include <stdio.h> #include <cstring> #include <cmath> # ...
- 2019-8-31-C#-对-byte-数组进行模式搜索
title author date CreateTime categories C# 对 byte 数组进行模式搜索 lindexi 2019-08-31 16:55:58 +0800 2018-07 ...
- Linux的概述与分类
1．Linux的概述 Linux是基于Unix的开源免费的操作系统,由于系统的稳定性和安全性几乎成为程序代码运行的最佳系统环境.Linux是由Linus Torvalds(林纳斯·托瓦兹)起初开发的, ...
- Contentprovider 注册 启动简单流程
安装app时packagemanager 读取manixfest获取provider信息 存在数据库里流程:1.加载ActivityThread main方法,创建消息队列.ActivityThrea ...
- 解决“google快照无法打开”的简单而有效的方法～
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/yangle20081982/article/details/25892553 解决&q ...
- bzoj1579 道路升级
Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M(1<=M<=50,000)条双向泥土道路,编号为1..M. 道路i连接牛棚P1_i和P2_i ...
- JavaScript--时间日期格式化封装
这是一个正常的封装: 其他非正常的请按照以下语句自由搭配 <!DOCTYPE html> <html lang="en"> <head> < ...
- MUI - 基于plus.downloader的图片懒加载功能，支持本地缓存
基于plus.downloader的图片懒加载功能,支持本地缓存 简单说一下 在app中,对一些变动不频繁的图片数据(如个人头像等),是需要存储在本地的.我相信这对大多数的app都是强需求的. 怎么使 ...
- 注意特殊情况！最长上升子序列！！poj2533
poj 2533 简单的动归.用O(n^2)的算法也能过.但是有个细节!刚开始ans初始化为0时是错的!!!要初始化为1.因为只有1个数的时候,下面的循环是不会执行的.....或者特判.. #incl ...
- LightOJ 1370 Bi-shoe and Phi-shoe【欧拉函数 && 质数】
题目链接: http://lightoj.com/login_main.php?url=volume_showproblem.php?problem=1370 题意: 给定值,求满足欧拉值大于等于这个 ...