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 ...
随机推荐
- 使用nuxt.js官方脚手架构建koa2的es6编译问题
最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢? 这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编 ...
- 使用web-component搭建企业级组件库
组件库的现状 前端目前比较主流的框架有react,vuejs,angular等. 我们通常去搭建组件库的时候都是基于某一种框架去搭建,比如ant-design是基于react搭建的UI组件库,而ele ...
- python 常规字符匹配
- 廖雪峰Python总结2
1.切片 L[0:3]表示,从索引0开始,直到索引3为止,但是不包括索引3.如果第一个索引是0,还可以省略L[:3] 倒数切片:L[-n:-1],-1是倒数第一个元素,L[-n:-1]不包括倒数第一个 ...
- JavaScript--数组与伪数组(特殊对象)的区别
一.数组与伪数组的区别例子: 从原型链上解析: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Linux 内存管理之mmap详解
找了好多,最后发现下面这篇时讲的比较通俗易懂的. Linux内存管理之mmap详解-heavent2010-ChinaUnix博客 http://blog.chinaunix.net/uid-2666 ...
- 观察者模式(Java实现)
import java.util.ArrayList; import java.util.Iterator; /* 抽象观察者类 */ abstract class Observer { public ...
- Convert Sorted Array to Binary Search Tree转换成平衡二查搜索树
Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 二分 ...
- QT_OPENGL-------- 3.ElementArraryBuffer
与上一节内容基本相同,只是用ElementArraryBuffer绘制三角形,也就是VBO与IBO. 1.VBO 一系列点,通过glDrawArrays指定绘制几个点,是连续的,不能跳跃.2.IBO( ...
- jmeter响应代码为乱码
1.在请求的前面添加BeanShell PostProcessor 输入prev.setDataEncoding("UTF-8"); 2.当响应数据或响应页面没有设置编码时,jme ...