vue获取dom元素注意事项

网友投稿 540 2023-03-03


vue获取dom元素注意事项

mounted(){

setTimeout(()=>{

this.contentToggle(http://);

},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 产生的数组中的第几个数

let getMenuText = this.$refs.menuItem[index].innerText;

}

总结

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Spring 3.x中三种Bean配置方式比较详解
下一篇:Java实现输出回环数(螺旋矩阵)的方法示例
相关文章

 发表评论

暂时没有评论,来抢沙发吧~