我要评论
mounted(){
settimeout(()=>{
this.contenttoggle();
},1000)
},
methods:{
contenttoggle(){
console.log(this.$refs.bodyfont.offsetheight);
}
}
vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数里，即dom加载完再获取，但是结果并不如我们所想，又想到用一个
this.$nexttick(()=>{
//函数
})
来获取，发现根本没用啊/。。
所以好的办法就是用一个settimeout定时器，时间可以设为0，但是有时候生效，有时候不生效，还是加一个小的时间值比较保险，这样就可以保证获取到的一定是dom加载后的了，该原理适用于vue中很多传值的问题，刚开始获取不到传过来的值，用一个settimeout就可。
ps：vue获取dom元素内容
通过ref来获取dom元素
在vue官网上对ref的解释
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 dom 元素上使用，引用指向的就是 dom 元素; 如果用在子组件上，引用就指向组件实例
当 v-for 用于元素或组件的时候，引用信息将是包含 dom 节点或组件实例的数组
比如我现在要实现的效果是点击用v-for生成的li ，获取到该元素的值
首先要获取当前点击的li元素，我们要做的是
1.给dom添加点击事件和ref属性
<li class="sidebar-list" v-for="(item, index) in meunlist" @click="setpagemenu(index)" ref="menuitem">
<router-link class="sidebar-a" :to="{ path: item.listlink }" >{{item.listtitle}}</router-link>
</li>
2.然后在点击事件方法中使用ref
setpagemenu(index) {
//这个是获取当前menuitem值，用index来区分当前元素是v-for 产生的数组中的第几个数
let getmenutext = this.$refs.menuitem[index].innertext;
}
总结
以上所述是小编给大家介绍的vue获取dom元素注意事项，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
vue-cli或vue项目利用HBuilder打包成移动端app操作
网友评论