vue 获取dom元素

<template>
  <div style="display: block;" ref="abc">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  mounted: function () { // 此处不能用beforeMounte
    console.log(this.$refs.abc.style.cssText)
  }
}
</script>

输出结果是 display: block;

this.$refs.abc.getBoundingClientRect().height 获取高度

时间： 2024-08-04 22:16:36

vue 获取dom元素的相关文章

vue获取DOM元素并设置属性

这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值如果给子组件加ref,

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" con

Vue获取DOM元素样式 && 样式更改

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc">  </div> </template> <script>

Vue自定义指令获取DOM元素

我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export default { data(){ return{ msg : 'oldMsg' } } methods : { changeMsg : function(){ this.msg = 'newMsg' } } } 当调用了changeMsg方法,msg被修改为 ' newMsg ' ,我们可以把这次修改理解为数据

Vue系列之 => ref获取DOM元素和组件

可以获取DOM元素,和组件中的数据,方法 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-eq

vue获取当前元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue获取当前元素</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id=&q

通过class和id获取DOM元素的区别

1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsByClassName("class名") 从函数的名字可以知道,通过getElementsByClassName获取到的是一个数组,包括多个DOM元素,所以要执行DOM元素的方法,必须加一个索引,比如document.getElementsByClassName("class名&q

原生javascript获取dom元素简单介绍

原生javascript获取dom元素简单介绍: 使用jQuery可以各种方式获取元素,比如id选择器,类选择器,元素选择器等等,非常的方便. 下面就介绍一下如何利用原生的js实现获取dom元素的功能. 一.通过id获取元素: 最方便的那就是使用document.getElementById()函数. 具体可以参阅document.getElementById()一章节. 二.通过标签获取元素: 使用document.getElementsByTagName()函数. 具体可以参阅documen

获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scroll