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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 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
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python 编程速成(推荐)
2019/04/15 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
python实现拼接图片
2020/03/23 Python
python不同系统中打开方法
2020/06/23 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
Delphi CS笔试题
2014/01/04 面试题
医学求职信
2014/05/28 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
英语通知范文
2015/04/22 职场文书
2015年教务工作总结
2015/05/23 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers