vue获取dom元素注意事项


Posted in Javascript onDecember 28, 2017
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元素注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 #Javascript
webpack搭建vue 项目的步骤
Dec 27 #Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 #Javascript
js判断节假日实例代码
Dec 27 #Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 #Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 #Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 #Javascript
You might like
DISCUZ 分页代码
2007/01/02 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
php实例化一个类的具体方法
2019/09/19 PHP
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python 实现的车牌识别项目
2021/01/25 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
优秀教师感人事迹材料
2014/05/04 职场文书
岗位明星事迹材料
2014/05/18 职场文书
先进班组材料范文
2014/12/25 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
使用python绘制分组对比柱状图
2022/04/21 Python
Django框架之路由用法
2022/06/10 Python