好资源导航 » 文章资讯 » vue获取dom元素注意事项

vue获取dom元素注意事项

2023-09-18 16:12:05 58

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属性


{{item.listTitle}}

2.然后在点击事件方法中使用ref

setPageMenu(index){
//这个是获取当前menuItem值，用index来区分当前元素是v-for产生的数组中的第几个数
letgetMenuText=this.$refs.menuItem[index].innerText;
}

总结

以上所述是小编给大家介绍的vue获取dom元素注意事项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue获取dom元素注意事项

热门推荐

随机推荐