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 ...
随机推荐
- 【GDOI2017 day2】凡喵识图 二进制切分
题面 100 有一个显然的做法是\(O(n^2)\): 想办法优化这个做法: 我们给一个64位整数,切分成四个16位整数. 那么如果两个64位整数符合汉明距离为3的话,那么两者切分的四个16位整数中: ...
- loadrunner分析之-网页、网络、资源分析
在Web Page Diagnostics(网页分析)中当在场景中打开Diagnostics菜单下的Web Page Diagnostics功能,就能得到网页分析组图.通过这个图,可以对事务的组成进行 ...
- 洛谷 P4205 [NOI2005]智慧珠游戏 DFS
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P4205 [NOI2005]智慧珠游戏 题目描述 智慧 ...
- JavaScript--关于实例对象带不带参数和构造函数带不带参数的关系
就是一句话: 构造函数创建对象时,也可以带参数,因为可以对对象进行一些属性的初始化,也就是你创建对象时,就带着这些属性,当然你也可以不带参数,后面实例化对象后再进行添加.而且,js函数的参数在定义函数 ...
- JetBrains 系列软件--操作数据库+centos系统
这系列软件贼强大! 能操作数据库 也能操作centos(linux)系统 由于这系列都有这两个功能,下面以最近常用的JetBrains PhpStorm 2017.2.1 x64来举例子: 一.操作数 ...
- PHP小知识总结（1）
1. mysqli_query — 对数据库执行一次查询 失败时返回 FALSE ,通过 mysqli_query() 成功执行SELECT, SHOW, DESCRIBE或 EXPLAIN查询会返回 ...
- 超实用的Java数组技巧攻略分享！
本文分享了关于Java数组最顶级的11大方法,帮助你解决工作流程问题,无论是运用在团队环境或是在私人项目中,你都可以直接拿来用! 声明一个数组(Declare an array) String[] a ...
- 【JZOJ4772】【NOIP2016提高A组模拟9.9】运输妹子
题目描述 小轩轩是一位非同一般的的大农(lao)场(si)主(ji),他有一大片非同一般的农田,并且坐落在一条公路旁(可以认为是数轴),在他的农田里种的东西也非同一般--不是什么水稻小麦,而是妹子. ...
- 启动Jmeter录制代理进行录制，报 jmeter.protocol.http.proxy.ProxyControl
使用jmeter代理录制Http请求时,启动HTTP(S) Test Script Recorder报jmeter.protocol.http.proxy.ProxyControl, 日志为: 201 ...
- ajax请求 400 Bad Request, 然后就没进后台方法!
原因可能是 ajax提交表单的data中实体的字段没有值(表单中无值填充的问题) 导致前台就已经报错了! 需要注意的字段类型 double date int .. 我就是因为这个double , ...