<div class="jb51code">
<pre class="brush:js;">
mounted(){
setTimeout(()=>{
this.contentToggle();
},1000)
},methods:{
contentToggle(){
console.log(this.$refs.bodyFont.offsetHeight);
}
}
<div class="jb51code">
<pre class="brush:js;">
mounted(){
setTimeout(()=>{
this.contentToggle();
},1000)
},methods:{
contentToggle(){
console.log(this.$refs.bodyFont.offsetHeight);
}
}
vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数里，即dom加载完再获取，但是结果并不如我们所想，又想到用一个
//<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>})
来获取，发现根本没用啊/。。
所以好的办法就是用一个setTimeout定时器，时间可以设为0，但是有时候生效，有时候不生效，还是加一个小的时间值比较保险，这样就可以保证获取到的一定是dom加载后的了，该原理适用于vue中很多传值的问题，刚开始获取不到传过来的值，用一个setTimeout就可。
通过ref来获取dom元素
在vue官网上对ref的解释
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组
比如我现在要实现的效果是点击用v-for生成的li ，获取到该元素的值
首先要获取当前点击的li元素，我们要做的是
2.然后在点击事件方法中使用ref
以上所述是小编给大家介绍的vue获取dom元素注意事项。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/34451.html