vue获取dom元素注意事项
更新时间：2017年12月28日 08:37:44 作者：蓓蕾心晴
这篇文章主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
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.js每天必学之过渡与动画，对Vue.js过渡与动画进行深入学习，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)
本文主要介绍了element el-tooltip动态显示隐藏,主要实现有省略号显示,没有省略号不显示,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
Vue3动态组件怎么进行异常处理？下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
这篇文章主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最近学习了hooks,特地写一篇文章加深一下印象,下面这篇文章主要给大家介绍了关于vue3 hook自动导入原理及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
Vue.js计算机属性computed和methods方法详解
这篇文章主要为大家详细介绍了Vue.js计算机属性computed和methods方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要为大家详细介绍了Vue表情输入组件，微信face表情组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
本教程是介绍如何在vue中使用provide和inject,在 Vue 中,provide 和 inject 是用于实现祖先组件向后代组件传递数据的一种方式,对vue中provide、inject的使用方法感兴趣的朋友一起看看吧2024-02-02
toRef和toRefs可以用来复制reactive里面的属性然后转成 ref,它保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,本文介绍Vue3中toRef和toRefs的区别和用法,需要的朋友可以参考下2024-08-08
本篇文章主要介绍了Vue 开发模式下跨域问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论