从品牌网站建设到网络营销策划,从策略到执行的一站式服务
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } }
vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个
创新互联-专业网站定制、快速模板网站建设、高性价比白云网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式白云网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖白云地区。费用合理售后完善,十余年实体公司更值得信赖。
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属性
2.然后在点击事件方法中使用ref
setPageMenu(index) { //这个是获取当前menuItem值,用index来区分当前元素是v-for 产生的数组中的第几个数 let getMenuText = this.$refs.menuItem[index].innerText; }
总结
以上所述是小编给大家介绍的vue获取dom元素注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图